Merge branch '1-add-vite-pwa-plugin' into 'main'

Resolve "add vite pwa plugin" Closes #1 See merge request htwk-software/htwkalender-pwa!1
2025-07-16 09:38:51 +02:00 · 2024-05-17 13:08:25 +00:00
parent e13dad48b4 a15c6ea8b7
commit d73f7e284b
25 changed files with 4480 additions and 79 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -45,11 +45,14 @@ services:
    image: bitnami/nginx:1.25
    volumes:
      - ./reverseproxy.local.conf:/opt/bitnami/nginx/conf/nginx.conf
+      - ./local-cert/dev_htwkalender_de.pem:/opt/bitnami/nginx/conf/dev_htwkalender_de.pem
+      - ./local-cert/dev_htwkalender_de.key.pem:/opt/bitnami/nginx/conf/dev_htwkalender_de.key.pem
    depends_on:
      - htwkalender-backend
      - htwkalender-frontend
    ports:
      - "80:80"
+      - "443:443"

 volumes:
  pb_data:
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 *.iml
+
+dev-dist
--- a/frontend/index.html
+++ b/frontend/index.html
@ -1,18 +1,21 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" sizes="32x32" />
-    <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
-    <link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>HTWKalender</title>
+      <meta name="description" content="Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.">
+      <meta name="keywords" content="HTWK, calendar, iCal, dates, events, schedule">
+      <link rel="icon" href="/favicon.ico" sizes="32x32" />
+      <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
+      <link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
+      <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      <meta name="theme-color" content="#1b2022">
+      <link
      id="theme-link"
      rel="stylesheet"
      href="/themes/lara-light-blue/theme.css"
    />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTWKalender</title>
  </head>
  <body>
    <div id="app"></div>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -21,6 +21,7 @@
    "@tanstack/vue-query": "^5.28.9",
    "@tanstack/vue-query-devtools": "^5.28.10",
    "@vueuse/core": "^10.9.0",
+    "country-flag-emoji-polyfill": "^0.1.8",
    "pinia": "^2.1.7",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
@ -42,6 +43,8 @@
    "sass-loader": "^13.3.3",
    "typescript": "^5.4.3",
    "vite": "^5.2.7",
+    "vite-plugin-mkcert": "^1.17.5",
+    "vite-plugin-pwa": "^0.19.8",
    "vitest": "^1.4.0",
    "vue-tsc": "^1.8.27"
  }
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path id="tapes" fill="#ffed00" d="m11.258 1.166-3.48 1.389 4.742 11.89L16 13.057Zm-7.801.398L0 2.944l4.742 11.89 3.46-1.379Z"/><style>#tapes{fill:#00964e}@media (prefers-color-scheme:dark){#tapes{fill:#ffed00}}</style></svg>
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss
@ -49,7 +49,7 @@ $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
 $hoverBg: rgba(255, 255, 255, 0.03) !default;

 //global
-$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
+$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
 $fontSize: 1rem !default;
 $fontWeight: normal !default;
 $textColor: $shade000 !default;
@ -887,10 +887,10 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
 $imagePreviewActionIconBorderRadius: 50% !default;

 :root {
-    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-variation-settings: normal;
-    --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    --surface-a: #{$shade800};
    --surface-b: #{$shade900};
--- a/frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
+++ b/frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
@ -51,7 +51,7 @@ $shade800:#374151 !default;    //unused
 $shade900:#1f2937 !default;    //unused

 //global
-$fontFamily:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
+$fontFamily:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
 $fontSize:1rem !default;
 $fontWeight:normal !default;
 $textColor:$shade700 !default;
@ -881,10 +881,10 @@ $imagePreviewActionIconFontSize:1.5rem !default;
 $imagePreviewActionIconBorderRadius:50% !default;

 :root {
-    font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-feature-settings: "cv02","cv03","cv04","cv11";
    font-variation-settings: normal;
-    --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-feature-settings: "cv02","cv03","cv04","cv11";
    --surface-a:#{$shade000};
    --surface-b:#{$shade100};
--- a/frontend/public/pwa-192x192.png
+++ b/frontend/public/pwa-192x192.png
--- a/frontend/public/pwa-512x512.png
+++ b/frontend/public/pwa-512x512.png
--- a/frontend/public/pwa-maskable-192x192.png
+++ b/frontend/public/pwa-maskable-192x192.png
--- a/frontend/public/pwa-maskable-512x512.png
+++ b/frontend/public/pwa-maskable-512x512.png
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
--- a/frontend/public/themes/lara-dark-blue/theme.css
+++ b/frontend/public/themes/lara-dark-blue/theme.css
@ -1,8 +1,8 @@
 :root {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
-  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --surface-a: #2e3639;
  --surface-b: black;
--- a/frontend/public/themes/lara-light-blue/theme.css
+++ b/frontend/public/themes/lara-light-blue/theme.css
@ -1,8 +1,8 @@
 :root {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
-  --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-feature-settings: "cv02","cv03","cv04","cv11";
  --surface-a:#ffffff;
  --surface-b:#f9fafb;
--- a/frontend/public/themes/pwa-192x192.png
+++ b/frontend/public/themes/pwa-192x192.png
--- a/frontend/public/themes/pwa-512x512.png
+++ b/frontend/public/themes/pwa-512x512.png
--- a/frontend/public/themes/pwa-maskable-192x192.png
+++ b/frontend/public/themes/pwa-maskable-192x192.png
--- a/frontend/public/themes/pwa-maskable-512x512.png
+++ b/frontend/public/themes/pwa-maskable-512x512.png
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@ -64,7 +64,7 @@ updateLocale(localeStore().locale);
    <template #value="slotProps">
      <div v-if="slotProps.value" class="flex align-items-center">
        <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
-        <div>{{ displayCountry(slotProps.value) }}</div>
+        <div style="font-family: 'Twemoji Country Flags', 'Helvetica', 'Comic Sans', serif;">{{ displayCountry(slotProps.value) }}</div>
      </div>
      <span v-else>
        {{ slotProps.placeholder }}
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -55,6 +55,9 @@ import Skeleton from "primevue/skeleton";
 import Calendar from "primevue/calendar";
 import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
+import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
+
+polyfillCountryFlagEmojis();

 const app = createApp(App);
 const pinia = createPinia();
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -17,10 +17,66 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath } from "node:url";
+import { VitePWA } from 'vite-plugin-pwa';
+import mkcert from 'vite-plugin-mkcert';

-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    mkcert(),
+    VitePWA({
+      mode: 'development',
+      base: '/',
+      injectRegister: 'auto',
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
+      manifest: {
+        name: 'HTWKalender',
+        short_name: 'HTWKalender',
+        description: 'Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.',
+        theme_color: '#FFFFFF',
+        background_color: '#FFFFFF',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          {
+            src: "/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "any"
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any"
+          },
+          {
+            src: "/pwa-maskable-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "maskable"
+          },
+          {
+            src: "/pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable"
+          }
+        ],
+      },
+      registerType: 'autoUpdate',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}'],
+        cleanupOutdatedCaches: true
+      },
+      devOptions: {
+        enabled: true,
+        /* when using generateSW the PWA plugin will switch to classic */
+        type: 'module',
+        navigateFallback: 'index.html',
+        suppressWarnings: true,
+      }
+    })],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
--- a/local-cert/dev_htwkalender_de.key.pem
+++ b/local-cert/dev_htwkalender_de.key.pem
@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCoN9Mg1K0oPrNX
+JSQW9mFbFDkUainfxtceHSBIEONu25806IQtbdqam9vptDp244zBpVhwmboqcxHE
+YycWd2bSJZwvPuX4K4nWXxqGgfv0KspyphDrUoy8hiVAX6s6oSBB7V/3R2cTYk1Y
+bvivE8y3FKxGi3pymkrYa2eIMw/GjIuVPUPUEeaE89QoQUhi9bc3wLpywGzseSSr
+CwKOje61idivTWU3NEZnH98YZvS6Ifayj85gGCM0KdPdXsVxDkO/J32XJ6a2DxxK
+GS0i9agasFPmghOe73knWhXFEi+TA9NoTod6ifxjdH9gFJHOD3PKEUrmbBbU1RLO
+hLO1Xf7/AgMBAAECggEAR6xNeUIUqz6X5CwPhfchQRDLRz76q32Jv6tySzJi7SOH
+YKAnXUHesBxzZU6k0G4g1YtRNNzTHO4dZltG1sQ2G5jpxJmcm5JVbvDjmOb+RqkK
+zDGkqNdp3pObgKOijd8EIwL0biROr0wln2Xc8J/TjDgzNPWNzRGfjTmqCbaT5Kjg
+VOr1lEBZ27zVPJZrqUp5gVDlflbccZzOWOP2ah06uC9+RT5GQBDa0QBjoEgfgsBj
+hEJ+il1ovy2siKlH8i+MGPbLx6TEIHtMFogliGfpu2KSx3AKxj739TaW0sJvWShf
+kmL09dzhAjv0LtLJyAXpQ/TlUxJ4WVD1/iGDirWPbQKBgQDqVk9r2Hb4cyFTvG+3
+VDviYZW6f80VB0s/tNurR0PKooyzWXW+gRmDOdr6P2AGbSeukmESBANOTG25yFgf
+KqxwfxvvqYIUZXNclqrUtLLN+PBPSBMheiEaaZ8nVEOJUBxQScvvUTnDl6sqRAjZ
+b++4Cjk2uD5/ExtHCDy4LxBIIwKBgQC3xMcfgRqyjP7z1QJ9Ju2MpoJvlHHNhjdA
+Jyu4rXbv07p1ep54ls3p3LRKv1meO+O9b9Z6ao7WTXG5rbST0yfGqG+8BT/F8j1A
+ALIscCLv9TgAYhndoxnY+s+ZoTdKewhmYnQF/W2WfIVmJ5yCCSr09CjDUwfGolrd
+NNrwGEPNdQKBgH9r9zu5NNfcIp8Zs9WIJBfw4C3NGIL6uFwnx9rWoXIp+T/8wR2Z
+rXnBl+TDWT+lUxKF3eqh6/pDbNa8rc4ksidptpMXJPhaQeRyuOl4aFG/r0ws8Nof
+QqjODhCgrSiZOwwdVJsJG9PTQOt2mylAyKTWSk4K2VDX3tk9DWdJkBzpAoGAHpss
+WsfizWgEMlIAtx1bpPg6cyDzDzrSSuH7OyfQzkKiJFzGtejP5Ko4cNaLs3ngBTXy
+L7M9lN2TGkye7ZvWXRTCfzsUkwA0SUuUYShP+U0LBa1RB4PZkzS6jKi4D7SMAplV
+H4ZE0TJt+USRoWqrd96OR3G1stRpc7wQ1roD2N0CgYEAjDab4b8PmPvBI/HMb0Yg
+/zIsN9UYwNVzcRhDoXDpvK+NU76Mni6IKvryqbVfrFQ2cIRhaVQeAWogELkCrBwM
+t1y9O+s9u3OdvVoPzgv9ZNgqGNhUh1SIjoFen1Wh6dOILEgLNxf8mmaGlyMp25aA
+xvjtITjBVgMQy6Q3pAhjXpU=
+-----END PRIVATE KEY-----
--- a/local-cert/dev_htwkalender_de.pem
+++ b/local-cert/dev_htwkalender_de.pem
@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDXzCCAkegAwIBAgIUTy7qvUaZsPyv1ye02pMyOiSQGKkwDQYJKoZIhvcNAQEL
+BQAwPzELMAkGA1UEBhMCREUxDzANBgNVBAgMBlNheG9ueTEQMA4GA1UEBwwHTGVp
+cHppZzENMAsGA1UECgwESFRXSzAeFw0yNDA1MTcxMDE3MzNaFw0yNTA1MTcxMDE3
+MzNaMD8xCzAJBgNVBAYTAkRFMQ8wDQYDVQQIDAZTYXhvbnkxEDAOBgNVBAcMB0xl
+aXB6aWcxDTALBgNVBAoMBEhUV0swggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQCoN9Mg1K0oPrNXJSQW9mFbFDkUainfxtceHSBIEONu25806IQtbdqam9vp
+tDp244zBpVhwmboqcxHEYycWd2bSJZwvPuX4K4nWXxqGgfv0KspyphDrUoy8hiVA
+X6s6oSBB7V/3R2cTYk1YbvivE8y3FKxGi3pymkrYa2eIMw/GjIuVPUPUEeaE89Qo
+QUhi9bc3wLpywGzseSSrCwKOje61idivTWU3NEZnH98YZvS6Ifayj85gGCM0KdPd
+XsVxDkO/J32XJ6a2DxxKGS0i9agasFPmghOe73knWhXFEi+TA9NoTod6ifxjdH9g
+FJHOD3PKEUrmbBbU1RLOhLO1Xf7/AgMBAAGjUzBRMB0GA1UdDgQWBBTwpRfij80j
+WQAWAW0OLRTb1+in7TAfBgNVHSMEGDAWgBTwpRfij80jWQAWAW0OLRTb1+in7TAP
+BgNVHRMBAf8EBTADAQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBgY+EwzFyotxoNmpE1
+Q8nB1jUmVnESBOjjN8D9ct9dhbAl6ewmca0z2hniXrP0CsnmkrpjlDUySUAlAb2K
+ZJNvvzkVVhXeivB4GjS3/Z3ZdLQvIO9y14tA4CuydsIzXX/ElKxg8ezgEpJVdIQ5
+OpQhwtenLceQAevYdeHx/tydnLMB/zGNQMF0VHpCqchxxavlaRY332RrJLLFydwW
+j3qiWiYLZ84qF7Y6A87ekcTbDsa5gc6mrAp676Gvoq75KeYyNqIASzYNqZ0c8t5u
+h8P3tOFANUpr7cdQUG0VNY9Xabhxa8ELFi/wo6/Kb69dkG1O0brPjzRZgs69hVsX
+n+g+
+-----END CERTIFICATE-----
--- a/reverseproxy.local.conf
+++ b/reverseproxy.local.conf
@ -71,4 +71,31 @@ http {
            proxy_pass http://htwkalender-frontend:8000;
        }
    }
+
+    server {
+        listen              443 ssl;
+        listen              [::]:443 ssl;
+
+        ssl_certificate     /opt/bitnami/nginx/conf/dev_htwkalender_de.pem;
+        ssl_certificate_key /opt/bitnami/nginx/conf/dev_htwkalender_de.key.pem;
+
+        location /api {
+            proxy_pass http://htwkalender-backend:8090;
+            client_max_body_size 20m;
+            proxy_connect_timeout 600s;
+            proxy_read_timeout 600s;
+            proxy_send_timeout 600s;
+            send_timeout 600s;
+        }
+
+        location /_ {
+            proxy_pass http://htwkalender-backend:8090;
+            # Increase upload file size
+            client_max_body_size 100m;
+        }
+
+        location / {
+            proxy_pass https://htwkalender-frontend:8000;
+        }
+    }
 }
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path id="tapes" fill="#ffed00" d="m11.258 1.166-3.48 1.389 4.742 11.89L16 13.057Zm-7.801.398L0 2.944l4.742 11.89 3.46-1.379Z"/><style>#tapes{fill:#00964e}@media (prefers-color-scheme:dark){#tapes{fill:#ffed00}}</style></svg>`