diff --git a/examples/blog/site/pages/blog/hello-world.rocket.md b/examples/blog/site/pages/blog/hello-world.rocket.md
index af7a503..f41b8a6 100644
--- a/examples/blog/site/pages/blog/hello-world.rocket.md
+++ b/examples/blog/site/pages/blog/hello-world.rocket.md
@@ -1,9 +1,9 @@
```js server
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'blog/hello-world.rocket.md';
-import { html } from '../recursive.data.js';
+import { html, components } from '../recursive.data.js';
import { layout } from './local.data.js';
-export { html, layout };
+export { html, components, layout };
/* END - Rocket auto generated - do not touch */
export const title = 'Hello world!';
@@ -12,12 +12,6 @@ export const author = 'Thomas Allmer (@daKmoR)';
export const authorHref = 'https://twitter.com/daKmoR';
export const value = 128;
export const description = 'Just a Hello World Post!';
-
-// TODO: remove once lit-ssr can handle undefined values https://github.com/lit/lit/issues/2572
-export const heroImage = '';
-export const alt = '';
-
-import '../../src/components/blog-author.js';
```
hey
diff --git a/examples/blog/site/pages/blog/with-image.rocket.md b/examples/blog/site/pages/blog/with-image.rocket.md
index 3bd1948..7ad89a2 100644
--- a/examples/blog/site/pages/blog/with-image.rocket.md
+++ b/examples/blog/site/pages/blog/with-image.rocket.md
@@ -1,9 +1,9 @@
```js server
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'blog/with-image.rocket.md';
-import { html } from '../recursive.data.js';
+import { html, components } from '../recursive.data.js';
import { layout } from './local.data.js';
-export { html, layout };
+export { html, components, layout };
/* END - Rocket auto generated - do not touch */
export const title = 'With Image!';
@@ -14,8 +14,6 @@ export const value = 128;
export const description = 'Now with an image!';
export const heroImage = './assets/liftoff-flames.jpg';
export const alt = 'Liftoff Flames';
-
-import '../../src/components/blog-author.js';
```
hey
diff --git a/examples/blog/site/pages/index.rocket.js b/examples/blog/site/pages/index.rocket.js
index bf65fb9..c2a35cd 100644
--- a/examples/blog/site/pages/index.rocket.js
+++ b/examples/blog/site/pages/index.rocket.js
@@ -1,16 +1,13 @@
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'index.rocket.js';
-import { html } from './recursive.data.js';
-export { html };
+import { html, components } from './recursive.data.js';
+export { html, components };
/* END - Rocket auto generated - do not touch */
import { PageTree } from '@rocket/engine';
import { nothing } from 'lit';
import { baseHead } from '../src/parts/baseHead.js';
-import '../src/components/blog-post-preview.js';
-import '../src/components/blog-header.js';
-
export const title = 'Example Blog';
export const description = 'The perfect starter for your perfect blog.';
export const permalink = 'https://example.com/';
diff --git a/examples/blog/site/pages/recursive.data.js b/examples/blog/site/pages/recursive.data.js
index a9dc6d2..746ee8c 100644
--- a/examples/blog/site/pages/recursive.data.js
+++ b/examples/blog/site/pages/recursive.data.js
@@ -1,3 +1,11 @@
// everything you export here will be automatically injected into all pages
export { html } from 'lit';
+
+export const components = {
+ 'blog-author': () => import('../src/components/BlogAuthor.js').then(m => m.BlogAuthor),
+ 'blog-header': () => import('../src/components/BlogHeader.js').then(m => m.BlogHeader),
+ 'blog-post': () => import('../src/components/BlogPost.js').then(m => m.BlogPost),
+ 'blog-post-preview': () =>
+ import('../src/components/BlogPostPreview.js').then(m => m.BlogPostPreview),
+};
diff --git a/examples/blog/site/src/components/blog-author.js b/examples/blog/site/src/components/BlogAuthor.js
similarity index 63%
rename from examples/blog/site/src/components/blog-author.js
rename to examples/blog/site/src/components/BlogAuthor.js
index a5ed09b..e7273aa 100644
--- a/examples/blog/site/src/components/blog-author.js
+++ b/examples/blog/site/src/components/BlogAuthor.js
@@ -1,20 +1,24 @@
import { html, css, LitElement } from 'lit';
export class BlogAuthor extends LitElement {
- static get properties() {
- return {
- name: { type: String },
- href: { type: String },
- };
+ static properties = {
+ name: { type: String },
+ href: { type: String },
+ };
+
+ constructor() {
+ super();
+ this.name = '';
+ this.href = '';
}
- static get styles() {
- return css`
+ static styles = [
+ css`
.author {
margin-bottom: 0.75rem;
}
- `;
- }
+ `,
+ ];
render() {
return html`
diff --git a/examples/blog/site/src/components/BlogHeader.js b/examples/blog/site/src/components/BlogHeader.js
new file mode 100644
index 0000000..b35dac2
--- /dev/null
+++ b/examples/blog/site/src/components/BlogHeader.js
@@ -0,0 +1,87 @@
+import { html, css, LitElement } from 'lit';
+import { shared } from '../styles/shared.js';
+
+export class BlogHeader extends LitElement {
+ static properties = {
+ name: { type: String },
+ href: { type: String },
+ };
+
+ render() {
+ return html`
+
+ `;
+ }
+
+ static styles = [
+ shared,
+ css`
+ header {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ height: 5rem;
+ }
+ article {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .header-subitem {
+ display: flex;
+ flex-grow: 0;
+ gap: 0.5em;
+ align-items: center;
+ justify-content: center;
+ color: var(--theme-text-lighter);
+ font-size: initial;
+ padding: 0.5rem;
+ }
+ .header-subitem:hover {
+ color: var(--theme-accent);
+ }
+ .header-subitem svg {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ @media (max-width: 32em) {
+ .header-subitem {
+ display: none;
+ }
+ }
+
+ h1 {
+ margin: 0;
+ font-size: 1.5rem;
+ max-width: 100%;
+ display: flex;
+ flex-grow: 1;
+ }
+
+ img {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ span {
+ margin-left: 0.5rem;
+ }
+
+ h1 a {
+ text-decoration: none;
+ display: inline-flex;
+ }
+ `,
+ ];
+}
+
+customElements.define('blog-header', BlogHeader);
diff --git a/examples/blog/site/src/components/blog-post.js b/examples/blog/site/src/components/BlogPost.js
similarity index 80%
rename from examples/blog/site/src/components/blog-post.js
rename to examples/blog/site/src/components/BlogPost.js
index 664ddc5..adbef74 100644
--- a/examples/blog/site/src/components/blog-post.js
+++ b/examples/blog/site/src/components/BlogPost.js
@@ -1,16 +1,23 @@
import { html, css, LitElement } from 'lit';
-import './blog-author.js';
export class BlogPost extends LitElement {
- static get properties() {
- return {
- title: { type: String },
- author: { type: String },
- authorHref: { type: String },
- publishDate: { type: String, attribute: 'publish-date' },
- heroImage: { type: String, attribute: 'hero-image' },
- alt: { type: String },
- };
+ static properties = {
+ title: { type: String },
+ author: { type: String },
+ authorHref: { type: String },
+ publishDate: { type: String, attribute: 'publish-date' },
+ heroImage: { type: String, attribute: 'hero-image' },
+ alt: { type: String },
+ };
+
+ constructor() {
+ super();
+ this.title = '';
+ this.author = '';
+ this.authorHref = '';
+ this.publishDate = '';
+ this.heroImage = '';
+ this.alt = '';
}
render() {
@@ -42,8 +49,8 @@ export class BlogPost extends LitElement {
`;
}
- static get styles() {
- return css`
+ static styles = [
+ css`
.hero-image {
width: 100vw;
object-fit: cover;
@@ -100,8 +107,6 @@ export class BlogPost extends LitElement {
font-size: 2.25rem;
font-weight: 700;
}
- `;
- }
+ `,
+ ];
}
-
-customElements.define('blog-post', BlogPost);
diff --git a/examples/blog/site/src/components/blog-post-preview.js b/examples/blog/site/src/components/BlogPostPreview.js
similarity index 75%
rename from examples/blog/site/src/components/blog-post-preview.js
rename to examples/blog/site/src/components/BlogPostPreview.js
index 3afcd8a..1dc02d8 100644
--- a/examples/blog/site/src/components/blog-post-preview.js
+++ b/examples/blog/site/src/components/BlogPostPreview.js
@@ -1,13 +1,20 @@
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, nothing } from 'lit';
export class BlogPostPreview extends LitElement {
- static get properties() {
- return {
- post: { type: Object },
- };
+ static properties = {
+ post: { type: Object },
+ };
+
+ constructor() {
+ super();
+ /** @type {{ publishDate: string; title: string; description: string; url: string; } | undefined} */
+ this.post = undefined;
}
render() {
+ if (!this.post) {
+ return nothing;
+ }
return html`
@@ -20,8 +27,8 @@ export class BlogPostPreview extends LitElement {
`;
}
- static get styles() {
- return css`
+ static styles = [
+ css`
.content :global(main > * + *) {
margin-top: 1rem;
}
@@ -58,8 +65,6 @@ export class BlogPostPreview extends LitElement {
font-weight: 700;
color: var(--theme-text);
}
- `;
- }
+ `,
+ ];
}
-
-customElements.define('blog-post-preview', BlogPostPreview);
diff --git a/examples/blog/site/src/components/blog-header.js b/examples/blog/site/src/components/blog-header.js
deleted file mode 100644
index 7842fb6..0000000
--- a/examples/blog/site/src/components/blog-header.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { html, css, LitElement } from 'lit';
-import { shared } from '../styles/shared.js';
-
-export class BlogHeader extends LitElement {
- static get properties() {
- return {
- name: { type: String },
- href: { type: String },
- };
- }
-
- render() {
- return html`
-
- `;
- }
-
- static get styles() {
- return [
- shared,
- css`
- header {
- padding-top: 1rem;
- padding-bottom: 1rem;
- height: 5rem;
- }
- article {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .header-subitem {
- display: flex;
- flex-grow: 0;
- gap: 0.5em;
- align-items: center;
- justify-content: center;
- color: var(--theme-text-lighter);
- font-size: initial;
- padding: 0.5rem;
- }
- .header-subitem:hover {
- color: var(--theme-accent);
- }
- .header-subitem svg {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- @media (max-width: 32em) {
- .header-subitem {
- display: none;
- }
- }
-
- h1 {
- margin: 0;
- font-size: 1.5rem;
- max-width: 100%;
- display: flex;
- flex-grow: 1;
- }
-
- img {
- width: 2.5rem;
- height: 2.5rem;
- }
-
- span {
- margin-left: 0.5rem;
- }
-
- h1 a {
- text-decoration: none;
- display: inline-flex;
- }
- `,
- ];
- }
-}
-
-customElements.define('blog-header', BlogHeader);
diff --git a/examples/blog/site/src/layouts/LayoutBlogPost.js b/examples/blog/site/src/layouts/LayoutBlogPost.js
index d45cf04..1a1794e 100644
--- a/examples/blog/site/src/layouts/LayoutBlogPost.js
+++ b/examples/blog/site/src/layouts/LayoutBlogPost.js
@@ -1,7 +1,5 @@
import { html } from 'lit';
import { baseHead } from '../parts/baseHead.js';
-import '../components/blog-header.js';
-import '../components/blog-post.js';
export class LayoutBlogPost {
render(data) {
+ My Blog
+
+