palavatv · pascalwengerter · Nov 29, 2022 · Nov 29, 2022 · Sep 23, 2023 · Sep 23, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,18 +2,20 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2022: true,
   },
   plugins: [
     'vuejs-accessibility',
   ],
   extends: [
-    'plugin:vue/essential',
     '@vue/airbnb',
+    'airbnb-base',
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/essential',
     'plugin:vuejs-accessibility/recommended',
   ],
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

diff --git a/babel.config.js b/babel.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html dir="ltr" >
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>palava.tv</title>
+    <!-- TODO: Make use of vueuse to provide l10n'ed meta information -->
     <meta name="description" content="palava.tv is a cost-free, simple to use, secure, and open source platform for video calls, built on top of the WebRTC technology" />
     <meta name="keywords" content="webrtc,video chat,conference,free"/>
     <meta name="mobile-web-app-capable" content="yes">
@@ -43,12 +44,12 @@
     <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-splash/apple-splash-1668-2388.png" />
     <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-splash/apple-splash-2048-1536.png" />
     <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-splash/apple-splash-1536-2048.png" />
+    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but palava.tv doesn't work without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,54 +1,41 @@
 {
   "name": "palava-web",
-  "version": "1.1.0",
-  "author": "palava e. V.",
-  "license": "MIT",
-  "description": "The 2020 web front-end of palava.tv",
+  "version": "2.0.0",
+  "description": "The 2023 web front-end of palava.tv",
   "keywords": [
     "palava",
     "webrtc",
     "video chat"
   ],
+  "license": "MIT",
+  "author": "palava e.V.",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "@vue/compat": "^3.2.24",
-    "core-js": "^3.6.5",
+    "@vueuse/head": "^1.1.23",
     "palava-client": "^2.2.1",
-    "register-service-worker": "^1.7.1",
-    "vue": "^3.2.24",
-    "vue-i18n": "^9.0.0",
-    "vue-inline-svg": "^1.3.1",
-    "vue-meta": "^2.3.3",
-    "vue-router": "^4.0.12",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
+    "vue-inline-svg": "^3.1.2",
+    "vue-router": "^4.2.5",
     "yyid": "2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.3",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-plugin-unit-mocha": "~4.5.15",
-    "@vue/cli-plugin-vuex": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
-    "@vue/compiler-sfc": "^3.2.24",
-    "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/test-utils": "^1.3.0",
-    "babel-eslint": "^10.1.0",
-    "chai": "^4.1.2",
-    "chromedriver": "88",
-    "eslint": "^7.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.2.0",
-    "eslint-plugin-vuejs-accessibility": "^1.1.0",
-    "geckodriver": "^2.0.4",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/eslint-config-airbnb": "^7.0.0",
+    "eslint": "^8.50.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vuejs-accessibility": "^2.2.0",
+    "path": "^0.12.7",
     "sass": "^1.44.0",
-    "sass-loader": "^10.0.0"
+    "url": "^0.11.3",
+    "vite": "^4.4.9"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,31 +1,33 @@
 <template>
-  <router-view/>
+  <router-view />
 </template>
 
-<script>
-export default {
-  metaInfo() {
-    const lang = this.$root.$i18n.locale
-    return {
-      htmlAttrs: {
-        lang,
-      },
-      title: 'palava.tv',
-      titleTemplate: 'palava.tv | %s',
-    }
+<script setup>
+import { useHead } from "@vueuse/head";
+import { detectLanguage } from "./support";
+
+const lang = detectLanguage();
+
+useHead({
+  htmlAttrs: {
+    lang,
   },
-}
+  title: "palava.tv",
+  titleTemplate: "palava.tv | %s",
+});
 </script>
 
 <style lang="scss">
-@import '@/css/styles.scss';
+@import "@/css/styles.scss";
 
 @font-face {
   font-family: WorkSans;
-  src: url('/fonts/WorkSans-Regular.woff2') format('woff2');
+  // src: url('/fonts/WorkSans-Regular.woff2') format('woff2');
 }
 
-html, body, #app {
+html,
+body,
+#app {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -44,11 +46,18 @@ body {
   background: $background;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: 100%;
   font-weight: normal;
   margin: auto 0;
@@ -67,15 +76,17 @@ a {
 }
 
 ::selection {
-  background: #BCD2EE;
+  background: #bcd2ee;
 }
 
-button, input {
+button,
+input {
   font-family: inherit;
   font-size: 1em;
 }
 
-ul, li {
+ul,
+li {
   margin: 0;
   padding: 0;
 }
@@ -84,21 +95,24 @@ ul {
   list-style-type: none;
 }
 
-p, address {
+p,
+address {
   font-style: normal;
   margin: auto;
   &:not(:first-child) {
     margin-top: $small-plus-spacing;
   }
 }
 
-input, input[type=text] {
+input,
+input[type="text"] {
   appearance: none;
   border-radius: 0;
   box-shadow: none;
 }
 
-button, button[type=submit] {
+button,
+button[type="submit"] {
   appearance: none;
   border: none;
   background: none;
@@ -107,5 +121,4 @@ button, button[type=submit] {
     border: 0;
   }
 }
-
 </style>
diff --git a/src/components/InfoScreen.vue b/src/components/InfoScreen.vue
@@ -1,24 +1,35 @@
 <template>
-  <aside class="info-screen" tabindex="0" @keydown.esc="$emit('close')">
-    <button class="close" @click="$emit('close')">
+  <aside
+    class="info-screen"
+    tabindex="0"
+    @keydown.esc="$emit('close')"
+  >
+    <button
+      class="close"
+      @click="$emit('close')"
+    >
       <inline-svg
         :aria-label="$t('closeAlt')"
-        :src="require('../assets/icons/cross.svg')"
-        />
+        src="../assets/icons/cross.svg"
+      />
     </button>
-
     <Navigation
       type="screen"
       @open-info-screen="(page) => $emit('open-info-screen', page)"
-      />
-
-    <div class="info-content" v-html="infoPage.content" />
+    />
+    <div
+      class="info-content"
+      v-html="infoPage.content"
+    />
   </aside>
 </template>
 
 <script>
 import Navigation from '@/components/Navigation.vue'
 import i18nStrings from '@/i18nStrings'
+import { detectLanguage } from '@/support'
+
+const lang = detectLanguage()
 
 export default {
   components: {
@@ -30,6 +41,7 @@ export default {
       required: true,
     },
   },
+  emits: ['close', 'open-info-screen'],
   mounted() {
     if (this.page) { this.$el.focus() }
   },
@@ -38,16 +50,9 @@ export default {
       if (newPage) { this.$el.focus() }
     }
   },
-  methods: {
-    // confirmLeave($event) {
-    //   if (!window.confirm(this.$t("info.confirmLeave"))) {
-    //     $event.preventDefault()
-    //   }
-    // }
-  },
   computed: {
     infoPage() {
-      return i18nStrings[this.$root.$i18n.locale].infoPages.filter((ip) => ip.id === this.page)[0] || {}
+      return i18nStrings[lang].infoPages.filter((ip) => ip.id === this.page)[0] || {}
     }
   }
 }

diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
@@ -1,21 +1,23 @@
 <template>
   <button
+    type="button"
     :title="$t('switchLanguageTitle')"
     class="language-switcher"
     @click="switchLanguage"
-    >
-    <span :aria-label="$t('switchLanguageAlt')">{{ $root.$i18n.locale }}</span>
+  >
+    <!-- <span :aria-label="$t('switchLanguageAlt')">{{ $root.$i18n.locale }}</span> -->
   </button>
 </template>
 
 <script>
+// Introduce vueuse
 export default {
   methods: {
     switchLanguage() {
-      this.$root.$i18n.locale = this.$root.$i18n.locale === 'de' ? 'en' : 'de'
+      // this.$root.$i18n.locale = this.$root.$i18n.locale === 'de' ? 'en' : 'de'
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">

diff --git a/src/components/Logo.vue b/src/components/Logo.vue
@@ -1,21 +1,10 @@
 <template>
   <div class="logo">
-    <router-link :to="to">
+    <router-link to="/">
       <inline-svg
         :alt="$t('palavaLogoAlt')"
-        :src="require('../assets/icons/palava.svg')"
-        />
+        src="@/assets/icons/palava.svg"
+      />
     </router-link>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: "/",
-    }
-  }
-}
-</script>