🎉

src/app-episodes/index.css.ts

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const styles = css`
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+	}
+`;

src/app-episodes/index.ts

@@ -0,0 +1,15 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { styles } from "./index.css.js";
+
+const logo = import.meta.resolve("../../../assets/logo.svg");
+
+@customElement("app-episodes")
+export class AppEpisodes extends LitElement {
+	static styles = styles;
+	render() {
+		return html`
+			<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
+		`;
+	}
+}

src/app-episodes/routes.ts

@@ -0,0 +1,16 @@
+import type { RouteConfig } from "@lit-labs/router";
+import { html } from "lit";
+
+export const route = {
+	path: "/#/episodes",
+	async enter() {
+		await import("./index.js");
+		return true;
+	},
+	render(){
+		return html`<app-episodes></app-episodes>`;
+	},
+};
+export default [
+	route,
+] as RouteConfig[];

src/app-index.css.ts

@@ -1,33 +0,0 @@
-import { css } from "lit";
-export const styles = css`
-	:host {
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-		font-size: calc(10px + 2vmin);
-		color: #1a2b42;
-		max-width: 960px;
-		margin: 0 auto;
-		text-align: center;
-		background-color: var(--app-cfpodcasts-background-color);
-	}
-
-	main {
-		flex-grow: 1;
-	}
-
-	.logo {
-		margin-top: 36px;
-	}
-
-	.app-footer {
-		font-size: calc(12px + 0.5vmin);
-		align-items: center;
-	}
-
-	.app-footer a {
-		margin-left: 5px;
-	}
-`;

src/app-index.ts

@@ -1,39 +0,0 @@
-import { LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { styles } from "./app-index.css.js";
-
-const logo = import.meta.resolve("../../assets/logo.svg");
-
-@customElement("app-cfpodcasts")
-export class AppCfpodcasts extends LitElement {
-	@property({ type: String }) header = "My app";
-	static styles = styles;
-	render() {
-		return html`
-			<main>
-				<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
-				<h1>${this.header}</h1>
-
-				<p>Edit <code>src/AppCfpodcasts.ts</code> and save to reload.</p>
-				<a
-					class="app-link"
-					href="https://open-wc.org/guides/developing-components/code-examples"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Code examples
-				</a>
-			</main>
-
-			<p class="app-footer">
-				🚽 Made with love by
-				<a
-					target="_blank"
-					rel="noopener noreferrer"
-					href="https://github.com/open-wc"
-					>open-wc</a
-				>.
-			</p>
-		`;
-	}
-}

src/index.css.ts

@@ -0,0 +1,20 @@
+import { css } from "lit";
+export const styles = css`
+	:host {
+		height: 100vh;
+		height: 100dvh;
+		display: grid;
+		grid-template-areas:
+			"main"
+			"footer";
+		grid-template-rows: auto 2.5ch;
+	}
+
+	main {
+		grid-area: main;
+	}
+
+	nav {
+		grid-area: footer;
+	}
+`;

src/index.ts

@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { styles } from "./index.css.js";
+import { Router } from "@lit-labs/router";
+import { default as routesEpisodes, route as routeEpisodes } from "./app-episodes/routes.js";
+
+@customElement("app-cfpodcasts")
+export class AppCfpodcasts extends LitElement {
+	static styles = styles;
+	private _routes = new Router(this, [
+		{ path: "/", render: () => html`Hello world` },
+		...routesEpisodes
+	]);
+	render() {
+		return html`
+			<main>${this._routes.outlet()}</main>
+			<nav>
+				<a href="${this._routes.link("/")}">Home</a>
+				<a href="${this._routes.link("/", { hash: "/episodes" })}">Episodes</a>
+			</nav>
+		`;
+	}
+}