lobo
4e59770e53
Karma needed headless Chrome. Vitest with jsdom runs with no browser. Lighthouse CI now gets Chrome from @puppeteer/browsers. Two CSS font tests are dropped: jsdom does not apply real CSS.
81 lines
2.4 KiB
Markdown
81 lines
2.4 KiB
Markdown
# Gemini CLI Context for playground-frontend
|
|
|
|
## Project Overview
|
|
|
|
This is the frontend of the Playground project, built with Angular 22 and Angular Material. It includes features like a light/dark theme toggle and multi-language support via ngx-translate. The application is a static Single Page Application (SPA) served by NGINX.
|
|
|
|
**Key Technologies:**
|
|
* **Frontend Framework:** Angular 22
|
|
* **UI Components & Theming:** Angular Material
|
|
* **Internationalization:** ngx-translate
|
|
* **Server:** NGINX (for serving the SPA)
|
|
* **Containerization:** Docker
|
|
* **CI/CD:** GitHub Actions
|
|
|
|
## Building and Running
|
|
|
|
### Local Development
|
|
|
|
1. **Install dependencies:**
|
|
```bash
|
|
npm install
|
|
```
|
|
2. **Start development server:**
|
|
```bash
|
|
ng serve --open
|
|
```
|
|
The app will run at `http://localhost:4200`.
|
|
|
|
### Building for Production
|
|
|
|
To build the project for production, which creates the optimized static files:
|
|
```bash
|
|
ng build
|
|
```
|
|
|
|
### Running Tests
|
|
|
|
To run the unit tests:
|
|
```bash
|
|
ng test
|
|
```
|
|
`npm test` runs once (Vitest + jsdom). `ng test` watches in a terminal; use `--watch=false` to run once.
|
|
|
|
### Linting
|
|
|
|
To lint the codebase:
|
|
```bash
|
|
ng lint
|
|
```
|
|
|
|
### Docker
|
|
|
|
To build and run the application using Docker locally:
|
|
|
|
1. **Build Docker image:**
|
|
```bash
|
|
docker build -t playground-frontend:local .
|
|
```
|
|
2. **Run Docker container:**
|
|
```bash
|
|
docker run -p 8080:80 playground-frontend:local
|
|
```
|
|
Then open `http://localhost:8080` in your browser.
|
|
|
|
## Development Conventions
|
|
|
|
* **Language:** TypeScript
|
|
* **Framework:** Angular
|
|
* **Styling:** Only use tailwind, as much as possible. If not possible use SCSS (based on `styles.scss` and component-specific `.scss` files).
|
|
* **Linting:** ESLint is configured (see `eslint.config.js` and `package.json` scripts).
|
|
* **Internationalization:** Uses `ngx-translate` with `en.json` and `de.json` asset files.
|
|
|
|
## Project Structure (Key Areas)
|
|
|
|
* `src/app/`: Contains the main application logic, components, services, and routing.
|
|
* `src/app/pages/`: Specific pages of the application (e.g., about, algorithms, imprint, projects).
|
|
* `src/assets/`: Static assets including images, internationalization files (`i18n`), and logos.
|
|
* `Dockerfile`: Defines the Docker image for the application.
|
|
* `nginx.conf`: NGINX configuration for serving the SPA.
|
|
* `.gitea/workflows/`: Contains CI/CD workflows (e.g., `build-Frontend-a.yml`).
|