Feature/updates (#42)

* feat: add Playwright for end-to-end testing and LHCI for performance tracking

- Added Playwright as a testing framework with configuration in playwright.config.ts
- Introduced new npm scripts for end-to-end testing and performance tracking
- Updated package.json with new dependencies and scripts for CI builds

* feat(api): generate API service and models for posts and users

- Added BaseService for common API functionality.
- Implemented CRUD operations for posts: create, read, update, delete, and patch.
- Implemented user retrieval by ID and all users.
- Generated models for Post, User, Address, Company, Geo, and PostInput.
- Created request builder for handling HTTP requests with parameters.
- Updated ApiService to utilize generated services for user and post operations.

* feat: refactor API interactions by implementing facade services for users and posts

* feat(about): update profile image source to local asset and add alt text

* Add OpenAPI drift check to CI and refresh generated client

* Fix OpenAPI drift and align quality workflow with master

* Regenerate OpenAPI client to match current generator output

* feat: implement centralized branding configuration and update components to use branding service

* feat: update branding colors and styles across components for a cohesive design

Author: heyding

.github/workflows/quality.yml

@@ -0,0 +1,44 @@
+name: Quality Gates
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  smoke-and-lighthouse:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Check OpenAPI generated client is up-to-date
+        run: npm run openapi:check
+
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Run smoke tests
+        run: npm run e2e:ci
+
+      - name: Run Lighthouse CI
+        run: npm run lhci
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          if-no-files-found: ignore

.lighthouserc.json

@@ -0,0 +1,40 @@
+{
+  "ci": {
+    "collect": {
+      "numberOfRuns": 1,
+      "startServerCommand": "npx http-server ./dist/angular-tailwind-template/browser -p 4173 -s",
+      "url": ["http://127.0.0.1:4173/"]
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": [
+          "warn",
+          {
+            "minScore": 0.5
+          }
+        ],
+        "categories:accessibility": [
+          "error",
+          {
+            "minScore": 0.85
+          }
+        ],
+        "categories:best-practices": [
+          "warn",
+          {
+            "minScore": 0.8
+          }
+        ],
+        "categories:seo": [
+          "error",
+          {
+            "minScore": 0.85
+          }
+        ]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

README.md

@@ -46,6 +46,42 @@ npm start
 - **[Quickstart Guide](QUICKSTART.md)** - 5-Minuten Setup für geforktes Projekt
 - **[Contributing Guide](CONTRIBUTING.md)** - Wie du zum Template beitragen kannst
 
+## 🎯 Branding konfigurieren
+
+Alle zentralen Branding-Werte sind über eine Datei konfigurierbar:
+
+- `src/assets/branding/brand.config.json`
+
+Darüber steuerst du u. a.:
+
+- Farben (Primary, Secondary, Accent)
+- Schriftart (globale Font Family)
+- Hero-Hintergrundbild
+- App-Name, Logo-Initiale, Footer-Labels und Links
+- Developer-Daten auf der About-Seite
+
+Nach Änderungen reicht ein normaler Neustart des Dev-Servers (`npm start`) oder ein Reload bei laufendem Server.
+
+## 🗺️ Roadmap (3 Phasen)
+
+### Phase 1: Quick Wins
+
+- Playwright Smoke-Tests fuer Kernrouten (`/`, `/login`, `/components`)
+- Lighthouse CI als Quality Gate fuer Accessibility/SEO/Performance
+- CI-Artefakte fuer Testreports (Playwright HTML Report)
+
+### Phase 2: Mid-Term
+
+- API Client Generierung via OpenAPI
+- Error Monitoring (z. B. Sentry) mit globaler Fehlerkorrelation
+- Verbesserte Release Automation (Conventional Commits + semantic-release)
+
+### Phase 3: Enterprise Hardening
+
+- SSR + Hydration fuer SEO/Core Web Vitals
+- PWA-Strategie (Offline/Fallback/Installbarkeit)
+- Security/Compliance Gates (Dependency + Secret Scans, CSP-Validierung)
+
 ## ✨ Features
 
 ### 🇩🇪 **D-Stack & DSGVO Compliance**
@@ -189,9 +225,24 @@ npm start
 # Production build
 npm run build
 
+# Generate typed Angular client from OpenAPI
+npm run openapi:generate
+
 # Run tests
 npm test
 
+# End-to-end smoke tests
+npm run e2e
+
+# E2E tests for CI
+npm run e2e:ci
+
+# Lighthouse CI (build + audit)
+npm run lhci
+
+# Combined quality checks
+npm run quality
+
 # Code formatting
 npm run format
 

docs/CUSTOMIZATION.md

@@ -88,6 +88,53 @@ theme: {
 }
 ```
 
+### Branding zentral konfigurieren (empfohlen)
+
+Alle Branding-Werte (Design + Texte) sind zentral konfigurierbar in:
+
+- `src/assets/branding/brand.config.json`
+
+Beispiel:
+
+```json
+{
+  "design": {
+    "fontFamily": "Inter, sans-serif",
+    "primary": "#4f46e5",
+    "secondary": "#7c3aed",
+    "accent": "#ec4899",
+    "background": "#f9fafb",
+    "surface": "#ffffff",
+    "text": "#111827",
+    "textMuted": "#6b7280",
+    "heroImageUrl": "https://example.com/hero.jpg"
+  },
+  "text": {
+    "appName": "Mein Produkt",
+    "appInitial": "M",
+    "skipToContentLabel": "Zum Hauptinhalt springen",
+    "complianceBadgeLabel": "D-Stack Ready",
+    "complianceText": "Dieses Template ist konform mit den Standards des",
+    "complianceLinkLabel": "deutschland-stack",
+    "complianceLinkUrl": "https://technologie.deutschland-stack.gov.de/",
+    "footerCompanyName": "Mein Unternehmen",
+    "footerLearnMoreUrl": "https://github.com/my-org/my-repo",
+    "privacyLabel": "Datenschutz",
+    "imprintLabel": "Impressum",
+    "developerName": "Max Mustermann",
+    "developerRole": "Frontend Engineer",
+    "developerLinkedinUrl": "https://www.linkedin.com/in/max/",
+    "developerImageUrl": "assets/img/max.jpg"
+  }
+}
+```
+
+Hinweise:
+
+- Der `BrandingService` lädt die Datei beim App-Start.
+- Fehlende Felder fallen automatisch auf Defaults zurück.
+- Im Dev-Modus gibt es Warnungen in der Konsole, wenn Felder fehlen.
+
 ### D-Stack Banner anpassen/entfernen
 
 **`src/app/app.component.html`**
@@ -262,30 +309,25 @@ rm -rf src/app/features/admin
 
 ## 🔌 API Integration
 
-### API Service anpassen
+### API Services anpassen (OpenAPI + Facades)
 
-**`src/app/core/services/api.service.ts`**
-
-```typescript
-@Injectable({
-  providedIn: 'root',
-})
-export class ApiService {
-  private apiUrl = environment.apiUrl;
+Das Template nutzt generierte OpenAPI-Services plus Facade-Schicht:
 
-  constructor(private http: HttpClient) {}
+- OpenAPI Spec: `openapi/openapi.yaml`
+- Generator Config: `ng-openapi-gen.json`
+- Generierter Client: `src/app/core/api/generated/`
+- App-nahe Facades:
+  - `src/app/core/services/users-facade.service.ts`
+  - `src/app/core/services/posts-facade.service.ts`
 
-  // Eigene API-Endpunkte hinzufügen
-  getMyData(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/my-endpoint`);
-  }
+Bei API-Änderungen:
 
-  postMyData(data: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/my-endpoint`, data);
-  }
-}
+```bash
+npm run openapi:generate
 ```
 
+Danach bindest du neue Endpunkte idealerweise über die Facades in deine Komponenten ein.
+
 ### Eigene Models erstellen
 
 **`src/app/core/models/my-model.ts`**

e2e/smoke.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Smoke tests', () => {
+  test('loads home route and core layout', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Angular \+ Tailwind Template/i);
+    await expect(page.getByText(/D-Stack Ready/i).first()).toBeVisible();
+    await expect(page.getByRole('link', { name: /Datenschutz/i })).toBeVisible();
+  });
+
+  test('navigates to login page', async ({ page }) => {
+    await page.goto('/login');
+
+    await expect(page.getByRole('heading', { level: 2 })).toBeVisible();
+    await expect(page.locator('input#email')).toBeVisible();
+    await expect(page.locator('input#password')).toBeVisible();
+  });
+
+  test('components route resolves', async ({ page }) => {
+    const response = await page.goto('/components');
+    expect(response?.ok()).toBeTruthy();
+  });
+});

ng-openapi-gen.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "./node_modules/ng-openapi-gen/ng-openapi-gen-schema.json",
+  "input": "./openapi/openapi.yaml",
+  "output": "./src/app/core/api/generated",
+  "indexFile": true,
+  "removeStaleFiles": true,
+  "ignoreUnusedModels": false,
+  "module": false,
+  "apiService": "ApiClient",
+  "services": true,
+  "models": true,
+  "enumStyle": "alias",
+  "promises": false,
+  "nullSafeAdditionalProps": true
+}