Merge pull request 'Fix top-level await in main.js' (#119) from chore/Old-browser-incompatibility into main

Reviewed-on: #119
Reviewed-by: Jakob Scheid

src/features/footer/components/Footer.vue

@@ -35,7 +35,7 @@ const copyrightPeriod =
 <template>
     <footer class="global-footer">
         <div class="footer-segment">
-            <RouterLink to="/settings" class="link">
+            <RouterLink to="settings" class="link">
                 {{ t('preferences.settings') }}
             </RouterLink>
             <LanguageSwitchButton />

src/features/settings/views/SettingsView.vue

@@ -17,33 +17,9 @@ limitations under the License.
 <script setup>
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 
-import { loadSettingsConfig } from '../utils/settingsParser';
-import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
 
 const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const settingsLoaded = ref(false)
-const settings = ref([]);
-
-onMounted(async () => {
-    settings.value = (await loadSettingsConfig()).contents;
-    if (!settings.value.map((section) => section.name).includes(getActiveSection())) {
-        router.push('/settings');
-    };
-    settingsLoaded.value = true;
-});
-
-const getActiveSection = function getActiveSection () {
-    const segments = route.path
-        .split('/')
-        .filter(Boolean);
-
-    return segments[1];
-};
 </script>
 
 <template>
@@ -55,23 +31,7 @@ const getActiveSection = function getActiveSection () {
         </header>
         <LeftSidebarLayout class="layout">
             <template #sidebar>
-                <ul class="sidebar-sections-list">
-                    <li v-for="section in settings">
-                        <RouterLink
-                            :to="`/settings/${section.name}`"
-                            class="button button-link link sidebar-section"
-                            :class="{ active: getActiveSection() === section.name }"
-                        >
-                            {{ t(section.i18n) }}
-                        </RouterLink>
-                    </li>
-                </ul>
             </template>
-            <div>
-                <div v-if="!settingsLoaded">
-                    {{ t('loading') }}
-                </div>
-            </div>
         </LeftSidebarLayout>
     </div>
 </template>
@@ -86,10 +46,6 @@ const getActiveSection = function getActiveSection () {
     flex-direction: column;
 }
 
-.active {
-    background-color: var(--light-hover);
-}
-
 .header {
     padding: var(--main-content-padding-y) var(--main-content-padding-x);
 }
@@ -97,21 +53,4 @@ const getActiveSection = function getActiveSection () {
 .header h1 {
     margin: 0;
 }
-
-.sidebar-sections-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.sidebar-section {
-    --padding: 0.8em;
-    border-radius: var(--padding);
-    padding: var(--padding);
-    margin-bottom: 4px;
-    width: calc(100% - 2 * var(--padding));
-    text-align: start;
-    font-size: 1rem;
-    display: block;
-}
 </style>

src/locales/de.json

@@ -1,5 +1,4 @@
 {
-    "loading": "Laden ...",
     "search": {
         "searchBar": {
             "submit": "Suchen",

src/locales/en.json

@@ -1,5 +1,4 @@
 {
-    "loading": "Loading ...",
     "search": {
         "searchBar": {
             "submit": "Search",

src/locales/es.json

@@ -1,5 +1,4 @@
 {
-    "loading": "Cargando ...",
     "search": {
         "searchBar": {
             "submit": "Buscar",

src/locales/fr.json

@@ -1,5 +1,4 @@
 {
-    "loading": "Chargement ...",
     "search": {
         "searchBar": {
             "submit": "Rechercher",

src/locales/it.json

@@ -1,5 +1,4 @@
 {
-    "loading": "Caricamento ...",
     "search": {
         "searchBar": {
             "submit": "Cerca",

src/locales/pt.json

@@ -1,5 +1,4 @@
 {
-    "loading": "A carregar ...",
     "search": {
         "searchBar": {
             "submit": "Pesquisar",

src/main.js

@@ -16,15 +16,18 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
-import { i18n, loadLanguage } from './i18n';
+import { i18n, loadLanguage } from './i18n'
-import getCurrentLanguage from './utils/currentLanguage';
+import getCurrentLanguage from './utils/currentLanguage'
 import router from './router'
+
 import './styles/common.css'
 import './styles/variables/colors.css'
 
-await loadLanguage(getCurrentLanguage());
+(async () => {
+  await loadLanguage(getCurrentLanguage())
 
-createApp(App)
+  createApp(App)
     .use(router)
     .use(i18n)
     .mount('#app')
+})()

src/router/index.js

@@ -43,12 +43,6 @@ const routes = [
         path: '/settings',
         name: 'settings',
         component: SettingsView,
-        children: [
-            {
-                path: ':rest(.*)',
-                component: SettingsView
-            }
-        ],
         meta: {
             title: () => i18n.global.t('preferences.settings')
         }
@@ -65,18 +59,6 @@ const router = createRouter({
     routes
 });
 
-// remove trailing slash(es)
-router.beforeEach((route) => {
-    if (route.path !== '/' && route.path.endsWith('/')) {
-        return {
-            path: route.path.replace(/\/+$/, ''),
-            query: route.query,
-            hash: route.hash,
-            replace: true
-        };
-    };
-});
-
 // set page title
 router.afterEach(to => {
     const title =

src/styles/common.css

@@ -23,23 +23,10 @@ body {
     text-decoration: none;
 }
 
-.link:hover:not(.button-link), .link:focus:not(.button-link) {
+.link:hover:not(.button-link) {
-    outline: none;
     text-decoration: underline;
 }
 
-.button-link {
-    color: var(--dark);
-}
-
-.button-link:hover {
-    color: var(--dark);
-}
-
-.button-link:visited {
-    color: var(--dark);
-}
-
 input {
     color: var(--dark);
 }
@@ -48,17 +35,3 @@ input {
     padding: var(--main-content-padding);
     width: calc(100% - var(--main-content-padding-x) * 2);
 }
-
-.button {
-    background-color: var(--light-bg);
-    border: none;
-}
-
-.button:focus {
-    background-color: var(--light-hover);
-    outline: none;
-}
-
-.button:hover {
-    background-color: var(--light-hover);
-}