Move to Angular 22 and update all dependencies. TypeScript stays on 6.0 (7 is blocked by Angular 22). Drop the ip-address override, add fast-uri and basic-ftp overrides for audit fixes. Set ChangeDetectionStrategy.Eager on components, as the ng update migration does, and turn off the new OnPush lint rule. Add the To Be Played project to the projects page and the about page.
80 lines
2.3 KiB
Markdown
80 lines
2.3 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
|
|
```
|
|
|
|
### 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`).
|