WIP PWA for Grain
feat: add grain-app shell with router
+36
+36
src/components/pages/grain-app.js
+36
src/components/pages/grain-app.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
3
+
4
+
// Import pages
5
+
import './grain-timeline.js';
6
+
7
+
export class GrainApp extends LitElement {
8
+
static styles = css`
9
+
:host {
10
+
display: block;
11
+
font-family: var(--font-family);
12
+
background: var(--color-bg-primary);
13
+
color: var(--color-text-primary);
14
+
min-height: 100vh;
15
+
min-height: 100dvh;
16
+
}
17
+
#outlet {
18
+
display: contents;
19
+
}
20
+
`;
21
+
22
+
firstUpdated() {
23
+
const outlet = this.shadowRoot.getElementById('outlet');
24
+
25
+
router
26
+
.register('/', 'grain-timeline')
27
+
.register('*', 'grain-timeline')
28
+
.connect(outlet);
29
+
}
30
+
31
+
render() {
32
+
return html`<div id="outlet"></div>`;
33
+
}
34
+
}
35
+
36
+
customElements.define('grain-app', GrainApp);