V4: Upgrade to Vue.js 3.5

.editorconfig

@@ -1,5 +1,9 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
 indent_size = 2
-trim_trailing_whitespace = true
+indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

.env.development

@@ -1,2 +1,2 @@
-VUE_APP_BASE_URL=/
-VUE_APP_API_URL=http://localhost:3000
+VITE_BASE_URL=/
+VITE_API_URL=http://localhost:3000

.env.production

@@ -1,2 +1,2 @@
-VUE_APP_BASE_URL=/resources/gabra/
-VUE_APP_API_URL=/resources/gabra-api
+VITE_BASE_URL=/resources/gabra/
+VITE_API_URL=/resources/gabra-api

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/build.yml

@@ -6,13 +6,13 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [22.x, 24.x]
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v4
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
 

Dockerfile

@@ -1,5 +1,5 @@
-# Use Node.js 12 as the base image
-FROM node:12.22
+# Use Node.js 22 as the base image
+FROM node:22.18
 
 # Set the working directory
 WORKDIR /app

README.md

@@ -1,54 +1,61 @@
-Ġabra Web Frontend, v3
-----------------------
+# Ġabra Web Frontend, v4
 
 Ġabra is an open lexicon for Maltese.
 
-This repository contains the source code for the Ġabra web site at
+This repository contains the source code for the frontend Ġabra web site at
 <http://mlrs.research.um.edu.mt/resources/gabra/>
 
-This repository (version 3) begins in late 2019 with a rewritten version of the site as a frontend-only Vue.js app.
 For the backend code, see [gabra-api](https://github.com/MLRS/gabra-api).
 
 Previous versions of the Ġabra site are available in these branches:
 
 - [`v1`](https://github.com/MLRS/gabra-web/tree/v1) (CakePHP 2 and PHP 5)
 - [`v2`](https://github.com/MLRS/gabra-web/tree/v2) (CakePHP 3 and PHP 7)
+- [`v3`](https://github.com/MLRS/gabra-web/tree/v3) (Vue.js v2)
 
 ## Requirements
 
 - Node.js
 - Access to **Ġabra API** web service, either locally or live. See <https://github.com/MLRS/gabra-api>.
 
 The path to the API is specified in the `.env*` files.
-For documentation about these, see [here](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables).
+For documentation about these, see [Vite docs on environment variables](https://vite.dev/guide/env-and-mode).
 
 ## Project setup
 
 Install all depedencies needed for building app.
-```
+
+```sh
 npm install
 ```
 
 ### Compile with hot-reload for development
+
+```sh
+npm run dev
 ```
-npm run serve
-```
-Then open  `http://localhost:8080` in a browser.
+
+Then open  `http://localhost:5173` in a browser.
 
 ### Compile and minify for production
-```
+
+```sh
 npm run build
 ```
+
 The contents of `dist` can then be served statically.
 
 #### With Docker
-```
+
+```sh
 ./build-with-docker.sh
 ```
+
 This will install requirements and build the app inside a Docker container,
 then copy the built app to the `dist` folder locally.
 
 ### Lint and fix files
-```
+
+```sh
 npm run lint
 ```

deploy.sh

@@ -10,9 +10,6 @@ FLAGS="--recursive --checksum --compress --verbose --exclude-from=deploy-exclude
 set -e
 
 if [ "$1" = "-wet" ]; then
-  echo "Build Ġabra Web"
-  npm run build
-
   echo "Deploy Ġabra Web (For real)"
   rsync ${FLAGS} ${LOCALDIR} ${HOST}:${REMOTEDIR}
 elif [ "$1" = "-delete" ]; then
@@ -23,6 +20,6 @@ else
   rsync --dry-run --delete ${FLAGS} ${LOCALDIR} ${HOST}:${REMOTEDIR}
   echo
   echo "### This was just a dry-run. ###"
+  echo "To push for real, use the flag '-wet'"
   echo "To delete extra files from server, use the flag '-delete' (potentially dangerous)"
-  echo "To build & push for real, use the flag '-wet'"
 fi

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

eslint.config.ts

@@ -0,0 +1,22 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+    rules: {
+        'vue/multi-word-component-names': 'off',
+      },
+    },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+)

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="" data-bs-theme="">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Ġabra</title>
+    <link href="/fontawesome/fontawesome.min.css" rel="stylesheet" />
+    <link href="/fontawesome/solid.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Ġabra does not work without JavaScript enabled.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>