update styling and add world map (#29)

* feat:add world map for country selection

* feat:include map in modals, country in db

* feat: allow to navigate back in modals

* feat: update styling of modals

* enhance: update styling of landing page, global

* enhance: update styling of about page

* enhance: update styling, fix minor issues

* enhance: redirect after submission

* fix: redirect working again but css broken with new postcss import

* design: update layout, work with tailwind v4

* design: navbar now finally working as intended, also on mobile

* design: update cards on landing page

* language: add first french translation

* translations: FAQ and others

* translation: add donation page

* feat: update flow of variable passing and set disclosure acceptance

* feat: commit lockfile

* fix: correct detected vulnerabilities in the setup

* fix: remove ssh_config line again

* fix: missing playwright, comments in files

* fix: typo in FAQ

* fix: test and logging

Author: iulusoy

.github/workflows/frontend-CI.yml

@@ -35,12 +35,12 @@ jobs:
           run: |
             cd src/frontend 
             pnpm install
-        - name: run basic tests typescript
+            
+        - name: Generate SvelteKit files
           run: |
             cd src/frontend
-            pnpm install
-            pnpm run test:unit
-
+            pnpm svelte-kit sync
+            
         - name: Install Playwright Browsers and run tests
           run: |
             cd src/frontend

README.md

@@ -3,4 +3,5 @@ This is the webserver for email donation.
 
 *This project is currently under development!*
 
+The frontend uses the svg world map by [behodgson](https://github.com/benhodgson/markedup-svg-worldmap) (Creative Commons Legal Code Attribution-ShareAlike 3.0 Unported).
 

docker-compose.yml

@@ -33,6 +33,8 @@ services:
       - '3306'
     volumes:
       - my-db:/var/lib/mysql
+    sysctls:
+      - net.ipv4.tcp_timestamps=0
 
 volumes:
   my-db:

src/frontend/drizzle.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from "drizzle-kit";
-import 'dotenv/config';
+import { config } from "dotenv";
+
+config({ path: ".env" }); 
 
 export default defineConfig({
   dialect: 'mysql',

src/frontend/i18n-README.md

@@ -0,0 +1,76 @@
+# Internationalization (i18n) Setup
+
+This project now includes internationalization support with English and French translations.
+
+## Features
+
+- **Language switcher** in the navigation bar
+- **Automatic language detection** from browser preferences
+- **Persistent language selection** stored in localStorage
+- **Fallback system** to English if translations are missing
+- **Type-safe translations** with TypeScript support
+
+## Usage
+
+### In Svelte components:
+
+```svelte
+<script>
+  import { t } from '$lib/i18n';
+</script>
+
+<!-- Use reactive translations -->
+<h1>{$t.homepage.title}</h1>
+<p>{$t.nav.about}</p>
+```
+
+### Adding new translations:
+
+1. Edit `src/lib/i18n/translations.ts`
+2. Add new keys to both `en` and `fr` objects
+3. The TypeScript types will automatically update
+
+### Example translation structure:
+
+```typescript
+export const translations = {
+  en: {
+    nav: {
+      about: 'Information',
+      contact: 'Kontakt'
+    },
+    homepage: {
+      title: 'Willkommen',
+      subtitle: 'Dies ist unsere Webseite'
+    }
+  },
+  fr: {
+    nav: {
+      about: 'À propos',
+      contact: 'Contact'
+    },
+    homepage: {
+      title: 'Bienvenue',
+      subtitle: 'Ceci est notre site web'
+    }
+  }
+};
+```
+
+## Components
+
+- **LanguageSwitcher**: Dropdown component for switching languages
+- **Location**: `src/lib/components/LanguageSwitcher.svelte`
+
+## Language Support
+
+Currently supported languages:
+- German (de) - Default
+- Français (fr)
+
+## Implementation Details
+
+- Language preference is stored in `localStorage`
+- Falls back to browser language detection
+- Uses Svelte stores for reactive updates
+- Includes TypeScript types for all translation keys

src/frontend/src/index.test.ts src/frontend/index.test.tssrc/frontend/src/index.test.ts renamed to src/frontend/index.test.ts

@@ -4,4 +4,4 @@ describe('sum test', () => {
 	it('adds 1 + 2 to equal 3', () => {
 		expect(1 + 2).toBe(3);
 	});
-});
+});

src/frontend/package.json

@@ -23,63 +23,34 @@
 		"gh-pages": "npm run build && npx gh-pages -d build"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.50.1",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.20.6",
-		"@typescript-eslint/eslint-plugin": "^8.24.1",
-		"@typescript-eslint/parser": "^8.24.1",
-		"autoprefixer": "^10.4.20",
-		"drizzle-kit": "^0.30.5",
-		"eslint": "^9.20.1",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"gh-pages": "^6.3.0",
-		"postcss": "^8.5.3",
-		"postcss-load-config": "^6.0.1",
-		"prettier": "^3.5.1",
-		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "^5.20.2",
-		"svelte-check": "^4.1.4",
+		"@playwright/test": "^1.57.0",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.27.0",
+		"@sveltejs/vite-plugin-svelte": "^6.1.0",
+		"autoprefixer": "^10.4.21",
+		"dotenv": "^17.2.1",
+		"drizzle-kit": "^0.31.8",
+		"drizzle-orm": "^0.44.4",
+		"flowbite": "^3.1.2",
+		"flowbite-svelte": "^1.11.2",
+		"flowbite-svelte-blocks": "^2.1.0",
+		"flowbite-svelte-icons": "^2.2.1",
+		"flowbite-typography": "^1.0.5",
+		"mysql2": "^3.14.3",
+		"postcss": "^8.5.6",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"svelte": "^5.37.3",
+		"svelte-check": "^4.3.1",
 		"svelte-preprocess": "^6.0.3",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.1.11",
 		"tslib": "^2.8.1",
-		"typescript": "^5.7.3",
-		"vite": "^6.1.6",
-		"vitest": "^3.0.6"
+		"typescript": "^5.9.2",
+		"vite": "^7.0.6",
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@dotenvx/dotenvx": "^1.39.0",
-		"@popperjs/core": "^2.11.8",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"classnames": "^2.5.1",
-		"dotenv": "^16.4.7",
-		"drizzle-orm": "^0.40.0",
-		"flowbite": "^3.1.2",
-		"flowbite-svelte": "^0.47.4",
-		"flowbite-svelte-icons": "^2.0.2",
-		"globrex": "^0.1.2",
-		"mdsvex": "^0.12.3",
-		"mysql2": "^3.13.0",
-		"node": "^23.8.0",
-		"pnpm": "^10.4.1",
-		"rehype-slug": "^6.0.0",
-		"remark-toc": "^9.0.0",
-		"svelte-awesome-icons": "^2.0.1"
+		"@tailwindcss/vite": "^4.1.11"
 	},
-	"packageManager": "pnpm@10.6.3+sha512.bb45e34d50a9a76e858a95837301bfb6bd6d35aea2c5d52094fa497a467c43f5c440103ce2511e9e0a2f89c3d6071baac3358fc68ac6fb75e2ceb3d2736065e6",
-	"pnpm": {
-		"ignoredBuiltDependencies": [
-			"@sveltejs/kit",
-			"esbuild",
-			"node",
-			"svelte-preprocess"
-		],
-		"onlyBuiltDependencies": [
-			"@sveltejs/kit",
-			"esbuild",
-			"node",
-			"svelte-preprocess"
-		]
-	}
-}
+	"packageManager": "pnpm@10.6.3"
+}