commafeed-podcasts/src/README.md

CommaFeed Podcasts – Web Component/App

This repository contains the source code for a small progressive web application built with Lit and Open‑WC recommendations.

High‑level structure

Pages (app-*, index.ts, *.css.ts, *.test.ts)

Folder naming (app-name) corresponds to custom element name (<app-name>) and endpoint (/name). Dynamic parameters are supported using : in the name (app-:id/<app-episode id=${id}>//episodes/:id).

Each folder follows a consistent pattern:

1. Page component file – index.ts contains the Lit component definition.
2. Styles – *.css.ts holds the scoped CSS for that component.
3. Tests – optional *.test.ts hoding overall app router tests (probably integration test).
4. Routing helper – optional routes.ts
5. README – describes the module’s purpose and key files.

Below is an overview of the current pages:

• <app-home>
• <app-episodes>

(More feature modules can be added in the future following the same pattern.)

Components (src/components/, *.css.ts, *.test.ts)

The components/ folder contains re‐usable UI building blocks shared across feature modules.

• file naming: c-name (files c-name.ts and c-name.css.ts)
• folder follows the same pattern as pages (except no routes)

Core (src/core/, *.test.ts)

The core/ folder contains routing and translation infrastructure, and shared utilities.

The *.test.ts files are used for unit tests for given core file.

Assets (src/assets/)

The assets/ folder contains static files (logos, icons, etc.) that are imported by components.

Use new URL('/assets/logo.png', import.meta.url) to get the URL of a static file.

How routing works

The application uses a lightweight client‑side router (see core/routes.ts). Route definitions look like:

import { route } from "@/core/route.js";
import { html } from "lit";

export const path = "/episodes/" as const;
export const routes = route(
	{
		path: "/episodes/:id/",
		async enter() {
			await import("./index.js");
			return true;
		},
		render({ id }){
			return html`<app-episode id=${id}></app-episode>`;
		},
	},
);