MapSwipe Revamp

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+.vscode

.env.development.local.sample

@@ -12,3 +12,7 @@ VITE_FIREBASE_MEASUREMENT_ID=
 VITE_MAPILLARY_API_KEY=
 
 VITE_OSM_OAUTH_REDIRECT_URI=
+
+VITE_FIREBASE_DB_EMULATOR_HOST=
+VITE_FIREBASE_DB_EMULATOR_PORT=
+VITE_FIREBASE_AUTH_EMULATOR_URL=

.github/workflows/publish-web-app-serve.yml

@@ -0,0 +1,23 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - project/*
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -0,0 +1,70 @@
+# -------------------------- Dev ---------------------------------------
+
+FROM node:22-bullseye AS dev
+
+RUN apt-get update -y \
+    && apt-get install -y --no-install-recommends git \
+    && rm -rf /var/lib/apt/lists/* \
+    && npm install -g [email protected] --force \
+    && git config --global --add safe.directory /code
+
+WORKDIR /code
+
+# Build stage for web app
+FROM dev AS web-app-serve-build
+
+COPY ./package.json ./yarn.lock /code/
+
+RUN yarn install
+COPY . /code/
+
+ENV VITE_FIREBASE_API_KEY=ExampleF1rebaseAP1k3y
+ENV VITE_FIREBASE_AUTH_DOMAIN=example-key.firebaseapp.com
+ENV VITE_FIREBASE_DATABASE_URL=https://example-database.firebaseio.com
+ENV VITE_FIREBASE_PROJECT_ID=example
+ENV VITE_FIREBASE_STORAGE_BUCKET=example.appspot.com
+ENV VITE_FIREBASE_MESSAGING_SENDER_ID=123123456123
+ENV VITE_FIREBASE_APP_ID=1:23456789:web:1abc234def567
+ENV VITE_COMMUNITY_DASHBOARD_URL=https://mapswipe.org
+
+ENV VITE_FIREBASE_MEASUREMENT_ID=
+ENV VITE_MAPILLARY_API_KEY=
+ENV VITE_BASE_URL=https://mapswipe.org/privacy
+ENV VITE_PRIVACY_POLICY_URL=https://mapswipe.org/privacy/
+ENV VITE_IMPRINT_URL=https://mapswipe.org/privacy/
+ENV VITE_APP_LOGO=./img/mapswipe-white.svg
+ENV VITE_PROJECTS_FALLBACK_IMAGE=./img/map-pin-600x400.jpg
+ENV VITE_ALLOW_UNVERIFIED_USERS=true
+
+ENV VITE_DEFAULT_LOCALE=en
+ENV VITE_FALLBACK_LOCALE=en
+ENV VITE_SUPPORTED_LOCALES=en,de,fr
+
+ENV VITE_THEME_LIGHT_PRIMARY=#060E2F
+ENV VITE_THEME_LIGHT_SECONDARY=#0D1949
+ENV VITE_THEME_LIGHT_TERTIARY=#EEF2FB
+ENV VITE_THEME_LIGHT_ACCENT=#589AE3
+ENV VITE_THEME_LIGHT_ERROR=#C62828
+ENV VITE_THEME_LIGHT_WARNING=#8E0000
+ENV VITE_THEME_LIGHT_INFO=#2196f3
+ENV VITE_THEME_LIGHT_SUCCESS=#4caf50
+ENV VITE_THEME_LIGHT_NEUTRAL=#272727
+
+ENV VITE_APP_NAME=MapSwipe
+ENV VITE_APP_WEBSITE_URL=https://mapswipe.org
+ENV VITE_APP_ATTRIBUTION_TITLE=MapSwipe
+ENV VITE_APP_ATTRIBUTION_URL=https://mapswipe.org/privacy/
+
+RUN WEB_APP_SERVE_ENABLED=true yarn build-only --outDir=/code/build
+
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
+
+LABEL org.opencontainers.image.source="github.com/mapswipe/mapswipe-web"
+LABEL org.opencontainers.image.authors="[email protected]"
+
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY ./web-app-serve/web-app-apply-config.sh /code/
+ENV APPLY_CONFIG__APPLY_CONFIG_PATH=/code/web-app-apply-config.sh
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

env.ts

@@ -0,0 +1,57 @@
+import {
+    defineConfig,
+    overrideDefineForWebAppServe,
+    Schema,
+} from '@togglecorp/vite-plugin-validate-env';
+
+const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
+if (webAppServeEnabled) {
+    // eslint-disable-next-line no-console
+    console.warn('Building application for web-app-serve');
+}
+const overrideDefine = webAppServeEnabled
+    ? overrideDefineForWebAppServe
+    : undefined;
+
+export default defineConfig({
+    overrideDefine,
+    validator: 'builtin',
+    schema: {
+        VITE_FIREBASE_API_KEY: Schema.string.optional(),
+        VITE_FIREBASE_AUTH_DOMAIN: Schema.string.optional(),
+        VITE_FIREBASE_DATABASE_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_FIREBASE_PROJECT_ID: Schema.string.optional(),
+        VITE_FIREBASE_STORAGE_BUCKET: Schema.string.optional(),
+        VITE_FIREBASE_MESSAGING_SENDER_ID: Schema.string.optional(),
+        VITE_FIREBASE_APP_ID: Schema.string.optional(),
+        VITE_FIREBASE_MEASUREMENT_ID: Schema.string.optional(),
+        VITE_BASE_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_PRIVACY_POLICY_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_IMPRINT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_NAME: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_TITLE: Schema.string.optional(),
+        VITE_APP_ATTRIBUTION_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_WEBSITE_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+        VITE_APP_LOGO: Schema.string.optional(),
+        VITE_PROJECTS_FALLBACK_IMAGE: Schema.string.optional(),
+        VITE_ALLOW_UNVERIFIED_USERS: Schema.boolean(),
+
+        VITE_DEFAULT_LOCALE: Schema.string.optional(),
+        VITE_FALLBACK_LOCALE: Schema.string.optional(),
+        VITE_SUPPORTED_LOCALES: Schema.string.optional(),
+
+        VITE_THEME_LIGHT_PRIMARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_SECONDARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_TERTIARY: Schema.string.optional(),
+        VITE_THEME_LIGHT_ACCENT: Schema.string.optional(),
+        VITE_THEME_LIGHT_ERROR: Schema.string.optional(),
+        VITE_THEME_LIGHT_WARNING: Schema.string.optional(),
+        VITE_THEME_LIGHT_INFO: Schema.string.optional(),
+        VITE_THEME_LIGHT_SUCCESS: Schema.string.optional(),
+        VITE_THEME_LIGHT_NEUTRAL: Schema.string.optional(),
+
+        VITE_COMMUNITY_DASHBOARD_URL: Schema.string({ format: 'url', protocol: true, tld: false }),
+
+        VITE_MAPILLARY_API_KEY: Schema.string.optional(),
+    },
+});

package.json

@@ -2,6 +2,7 @@
   "name": "mapswipe-web",
   "version": "0.2.8",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -17,9 +18,12 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@togglecorp/fujs": "^2.2.0",
+    "@turf/bbox": "^7.2.0",
     "base-64": "^1.0.0",
     "firebase": "^11.8.1",
     "mapillary-js": "^4.1.2",
+    "maplibre-gl": "^5.6.1",
     "ol": "^10.5.0",
     "ol-contextmenu": "^5.5.0",
     "ol-ext": "^4.0.31",
@@ -39,6 +43,7 @@
     "@mdi/font": "^7.4.47",
     "@playwright/test": "^1.38.0",
     "@rushstack/eslint-patch": "^1.3.3",
+    "@togglecorp/vite-plugin-validate-env": "^2.2.1",
     "@tsconfig/node18": "^18.2.2",
     "@types/base-64": "^1.0.2",
     "@types/jsdom": "^21.1.2",