jlengrand/rocket
1
0
Fork 0
mirror of https://github.com/modernweb-dev/rocket.git synced 2026-03-10 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: use components export in blog example

Browse Source
This commit is contained in:
Thomas Allmer
2022-03-17 23:46:24 +01:00
parent 81f989a1c6
commit 5c802cc4d3
10 changed files with 151 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/blog/site/pages/blog/hello-world.rocket.md
View File

@@ -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

6
examples/blog/site/pages/blog/with-image.rocket.md
View File

@@ -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

7
examples/blog/site/pages/index.rocket.js
View File

@@ -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/';

8
examples/blog/site/pages/recursive.data.js
View File

@@ -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),
};

22
examples/blog/site/src/components/blog-author.js → examples/blog/site/src/components/BlogAuthor.js
View File

@@ -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`

87
examples/blog/site/src/components/BlogHeader.js Normal file
View File

@@ -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`
<header class="wrapper">
<article>
<h1>
<a href="/">
<img src="resolve:@rocket/engine/assets/logo.svg" class="logo" />
<span>My Blog</span>
</a>
</h1>
</article>
</header>
`;
}
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);

37
examples/blog/site/src/components/blog-post.js → examples/blog/site/src/components/BlogPost.js
View File

@@ -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);

27
examples/blog/site/src/components/blog-post-preview.js → examples/blog/site/src/components/BlogPostPreview.js
View File

@@ -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`
<article class="post-preview">
<header>
@@ -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);

91
examples/blog/site/src/components/blog-header.js
View File

@@ -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`
<header class="wrapper">
<article>
<h1>
<a href="/">
<img src="resolve:@rocket/engine/assets/logo.svg" class="logo" />
<span>My Blog</span>
</a>
</h1>
</article>
</header>
`;
}
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);

2
examples/blog/site/src/layouts/LayoutBlogPost.js
View File

@@ -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) {