🔤 Ups docs to current state

This commit is contained in:
2026-06-11 13:24:14 +02:00
parent 656c2da8cf
commit b23974a51f
12 changed files with 121 additions and 6 deletions
+63
View File
@@ -0,0 +1,63 @@
# CommaFeed Podcasts Web Component/App
This repository contains the **source code** for a small progressive web application built with Lit and OpenWC recommendations.
## Highlevel 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.
1. **Styles** `*.css.ts` holds the scoped CSS for that component.
1. **Tests** optional `*.test.ts` hoding overall app router tests (probably integration test).
1. **Routing helper** optional `routes.ts`
1. **README** describes the modules purpose and key files.
Below is an overview of the current pages:
- [`<app-home>`](./app-home)
- [`<app-episodes>`](./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 reusable 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 clientside router (see `core/routes.ts`).
Route definitions look like:
```ts
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>`;
},
},
);
```