🎉

src/app-index.css.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,39 @@
+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>
+		`;
+	}
+}