Merge branch 'nuxt3-preparation' into 'main'

nuxt preparation

See merge request PronounsPage/PronounsPage!489

assets/style.scss

@@ -163,7 +163,7 @@ strike, .text-strike {
     text-decoration: line-through;
 }
 
-form[disabled] {
+form[inert] {
     opacity: .5;
 }
 

components/AcademicLinks.vue

@@ -13,7 +13,7 @@
                 {{ section.name }}
             </h3>
             <ul class="list-unstyled">
-                <Link v-for="link in section.entries" :key="link.url" :link="link" />
+                <LinkEntry v-for="link in section.entries" :key="link.url" :link="link" />
             </ul>
         </section>
     </section>

components/Account.vue

@@ -95,7 +95,7 @@
                                 </p>
                             </div>
 
-                            <form :disabled="savingUsername" @submit.prevent="changeUsername">
+                            <form :inert="savingUsername" @submit.prevent="changeUsername">
                                 <h3 class="h6">
                                     <T>user.account.changeUsername.header</T>
                                 </h3>
@@ -125,7 +125,7 @@
 
                             <hr>
 
-                            <form :disabled="savingEmail" @submit.prevent="changeEmail">
+                            <form :inert="savingEmail" @submit.prevent="changeEmail">
                                 <h3 class="h6">
                                     <T>user.account.changeEmail.header</T>
                                 </h3>

components/LinkEntry.vue

@@ -29,10 +29,14 @@
     </li>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import Vue from 'vue';
+import type { PropType } from 'vue';
+import type { Link } from '~/locale/config.ts';
+
+export default Vue.extend({
     props: {
-        link: { required: true },
+        link: { required: true, type: Object as PropType<Link> },
     },
-};
+});
 </script>

components/Links.vue

@@ -5,7 +5,7 @@
             <T>links.headerLong</T>
         </h2>
         <ul class="list-unstyled">
-            <Link v-for="link in $config.links.links" :key="link.url" :link="link" />
+            <LinkEntry v-for="link in $config.links.links" :key="link.url" :link="link" />
         </ul>
     </section>
 </template>

components/Login.vue

@@ -21,7 +21,7 @@
                             </div>
                         </div>
                         <div class="col-12 col-md-8">
-                            <form :disabled="saving" class="mb-4 mb-md-0" @submit.prevent="login">
+                            <form :inert="saving" class="mb-4 mb-md-0" @submit.prevent="login">
                                 <input
                                     v-model="usernameOrEmail"
                                     type="text"
@@ -55,7 +55,7 @@
                         </p>
                     </div>
 
-                    <form :disabled="saving" @submit.prevent="validate">
+                    <form :inert="saving" @submit.prevent="validate">
                         <div class="input-group mb-3">
                             <input
                                 ref="code"

components/Media.vue

@@ -9,14 +9,14 @@
             <T>links.mediaGuests</T>
         </h3>
         <ul v-if="$config.links.mediaGuests.length" class="list-unstyled">
-            <Link v-for="link in $config.links.mediaGuests" :key="link.url" :link="link" />
+            <LinkEntry v-for="link in $config.links.mediaGuests" :key="link.url" :link="link" />
         </ul>
         <h3 v-if="$config.links.mediaGuests.length && $config.links.mediaMentions.length" class="mt-4 mb-2">
             <Icon v="quote-right" />
             <T>links.mediaMentions</T>
         </h3>
         <ul v-if="$config.links.mediaMentions.length" class="list-unstyled">
-            <Link v-for="link in $config.links.mediaMentions" :key="link.url" :link="link" />
+            <LinkEntry v-for="link in $config.links.mediaMentions" :key="link.url" :link="link" />
         </ul>
     </section>
 </template>

components/MfaValidation.vue

@@ -8,7 +8,7 @@
                     <Icon v="mobile" />
                     <T>user.mfa.header</T>
                 </p>
-                <form :disabled="saving" @submit.prevent="validate">
+                <form :inert="saving" @submit.prevent="validate">
                     <div class="input-group mb-3">
                         <input
                             v-if="!recovery"

components/NamesLinks.vue

@@ -1,5 +1,5 @@
 <template>
     <ul v-if="$config.links.names && $config.links.names.length" class="list-unstyled">
-        <Link v-for="link in $config.links.names" :key="link.url" :link="link" />
+        <LinkEntry v-for="link in $config.links.names" :key="link.url" :link="link" />
     </ul>
 </template>

components/Recommended.vue

@@ -5,7 +5,7 @@
             <T>links.recommended</T>
         </h2>
         <ul class="list-unstyled">
-            <Link v-for="link in $config.links.recommended" :key="link.url" :link="link" />
+            <LinkEntry v-for="link in $config.links.recommended" :key="link.url" :link="link" />
         </ul>
     </section>
 </template>

components/Socials.vue

@@ -11,21 +11,22 @@
                         <T>contact.groups.{{ group }}</T><T>quotation.colon</T>
                     </p>
                 </li>
-                <Link v-for="link in groupLinks" :key="link.url" :link="link" />
+                <LinkEntry v-for="link in groupLinks" :key="link.url" :link="link" />
             </template>
         </ul>
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import { getSocialLinks } from '../src/contact.js';
 import { groupBy } from '../src/helpers.ts';
 
-export default {
+export default Vue.extend({
     data() {
         return {
             socials: groupBy([...getSocialLinks(this.$config)], (l) => l.group),
         };
     },
-};
+});
 </script>

locale/config.ts

@@ -559,7 +559,7 @@ interface LinkCategory {
     entries: Link[];
 }
 
-interface Link {
+export interface Link {
     /**
      * locale codes of the linked resource, e.g. when the source talks in a different locale about the configured locale
      */

package.json

@@ -79,7 +79,6 @@
         "uuid": "^8.3.2",
         "vue": "2.7.16",
         "vue-lazy-hydration": "^2.0.0-beta.4",
-        "vue-matomo": "^3.13.5-0",
         "vue-plausible": "^1.3.2",
         "vue-template-compiler": "2.7.16",
         "vuedraggable": "^2.24.3",
@@ -116,8 +115,8 @@
         "@types/speakeasy": "^2.0.10",
         "@types/uuid": "8.3.2",
         "@types/webpack": "^4.41.38",
-        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
-        "@typescript-eslint/parser": "^6.19.0",
+        "@typescript-eslint/parser": "^7.14.1",
         "@vue/test-utils": "^1.3.6",
         "avris-daemonise": "^0.0.2",
         "axios": "^0.21.4",
@@ -125,7 +124,7 @@
         "clipboard": "^2.0.6",
         "css-loader": "^5.2.7",
         "csv-loader": "^3.0.3",
-        "eslint": "^8.55.0",
+        "eslint": "^8.56.0",
         "eslint-formatter-gitlab": "^5.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.0",
@@ -147,15 +146,15 @@
         "postcss-url": "^10.1.3",
         "sass": "1.32.12",
         "sass-loader": "^10.1.1",
-        "sharp": "^0.31.3",
+        "sharp": "^0.33.4",
         "string-replace-loader": "^2.3.0",
         "suml-loader": "^0.1.1",
         "ts-jest": "^29.1.1",
         "ts-json-schema-generator": "^1.5.0",
         "tsconfig-paths": "3.14.2",
-        "typescript": "^5.3.3",
+        "typescript": "^5.5.2",
         "vue-meta": "^2.4.0",
-        "vue-tsc": "^1.8.27",
+        "vue-tsc": "^2.0.22",
         "webpack": "^4.47.0",
         "yaml-loader": "^0.8.0"
     },

pages/index.vue

@@ -6,17 +6,17 @@
                 <T>user.login.oauthError</T>
             </div>
         </div>
-        <Homepage v-if="$config.header" />
+        <HomepageRoute v-if="$config.header" />
-        <SelectVersion v-else />
+        <SelectVersionRoute v-else />
     </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import Homepage from '../routes/homepage.vue';
+import HomepageRoute from '../routes/homepage.vue';
-import SelectVersion from '../routes/select.vue';
+import SelectVersionRoute from '../routes/select.vue';
 
 export default Vue.extend({
-    components: { Homepage, SelectVersion },
+    components: { HomepageRoute, SelectVersionRoute },
 });
 </script>

plugins/vue-matomo.js

@@ -1,12 +0,0 @@
-import Vue from 'vue';
-import VueMatomo from 'vue-matomo';
-
-export default ({ app }) => {
-    if (process.env.NODE_ENV === 'production') {
-        Vue.use(VueMatomo, {
-            router: app.router,
-            host: 'https://matomo.avris.it',
-            siteId: 20,
-        });
-    }
-};

routes/english.vue

@@ -14,7 +14,7 @@
         <template v-if="$config.english.links">
             <Separator icon="link" />
             <ul class="list-unstyled">
-                <Link v-for="link in $config.english.links" :key="link.url" :link="link" />
+                <LinkEntry v-for="link in $config.english.links" :key="link.url" :link="link" />
             </ul>
         </template>
 

server/routes/blog.ts

@@ -57,13 +57,13 @@ router.get('/blog', handleErrorAsync(async (req, res) => {
             try {
                 const classHeroImages = content.map((x) => x.match(/<img src="([^"]+)" class="hero/)).filter((x) => !!x);
                 if (classHeroImages.length) {
-                    hero = classHeroImages[0]![1];
+                    hero = classHeroImages[0][1];
                     throw 'continue';
                 }
 
                 const images = content.map((x) => x.match(/^!\[[^\]]*]\(([^)]+)\)$/)).filter((x) => !!x);
                 if (images.length) {
-                    hero = images[0]![1];
+                    hero = images[0][1];
                 }
             } catch {
             }