v2.9.5 pre-upgrade release

This PR represents hopefully the last patch for v2.9 paving the way for a significant upgrade in our build pipeline. We're transitioning to Vite starting from v3.0.0 and eliminating deprecated dependencies.

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    "@vue/cli-plugin-babel/preset"
+    "@vue/cli-plugin-babel/preset",
+    "@babel/preset-typescript"
   ]
 }

.env

@@ -5,3 +5,4 @@ VUE_APP_MIDDLELAYER_API_PATH="/"
 VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/socket.io/"
 VUE_APP_TAWK_TO_SITE_ID=
 VUE_APP_BASE_URL="https://impresso-project.ch"
+VUE_APP_MAINTENANCE=

.env.development

@@ -0,0 +1,3 @@
+VUE_APP_MIDDLELAYER_API="https://dev.impresso-project.ch"
+VUE_APP_MIDDLELAYER_API_PATH="/api"
+VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"

.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+};

.github/workflows/docker-build-publish-release.yml

@@ -25,7 +25,7 @@ jobs:
       shell: bash
       run: echo "RELEASE_VERSION="$(git describe --tags --abbrev=0 ${GITHUB_SHA}) >> $GITHUB_ENV
     - name: Publish to Registry
-      uses: elgohr/Publish-Docker-Github-Action@master
+      uses: elgohr/Publish-Docker-Github-Action@v5
       env:
         GIT_BRANCH: ${{ steps.extract_branch.outputs.branch }}
         GIT_REVISION: ${{ steps.extract_hash.outputs.hash }}

.github/workflows/docker-build-publish.yml

@@ -19,7 +19,7 @@ jobs:
       run: echo "##[set-output name=hash;]$(git rev-parse --short ${GITHUB_SHA})"
       id: extract_hash
     - name: Publish to Registry
-      uses: elgohr/Publish-Docker-Github-Action@master
+      uses: elgohr/Publish-Docker-Github-Action@v5
       env:
         GIT_BRANCH: ${{ steps.extract_branch.outputs.branch }}
         GIT_REVISION: ${{ steps.extract_hash.outputs.hash }}

.gitignore

@@ -29,3 +29,7 @@ tmp/
 
 # redis files
 *.rdb
+
+# Local Netlify folder
+.netlify
+impresso-frontend.code-workspace

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.storybook/main.js

@@ -0,0 +1,56 @@
+const path = require('path');
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-scss"
+  ],
+  "framework": "@storybook/vue",
+  webpackFinal: (config) => {
+
+    config.module.rules.push({
+      resourceQuery: /blockType=i18n/,
+      type: 'javascript/auto',
+      loader: require.resolve('@intlify/vue-i18n-loader')
+    })
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        require.resolve("vue-style-loader"),
+        require.resolve("css-loader"),
+        require.resolve("sass-loader"),
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.sass$/,
+      use: [
+        require.resolve("vue-style-loader"),
+        require.resolve("css-loader"),
+        {
+          loader: require.resolve("sass-loader"),
+          options: {
+            sassOptions: {
+              indentedSyntax: true
+            }
+          }
+        }
+      ],
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": path.resolve(__dirname, "../src/"),
+    };
+    // keep this if you're doing typescript
+    config.resolve.extensions.push(".ts", ".tsx");
+    return config;
+  },
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import { Plugin as Fragment } from 'vue-fragment'
+
+Vue.use(VueI18n);
+Vue.use(Fragment)
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+

Dockerfile

@@ -1,5 +1,5 @@
 # 1. build
-FROM node:12-alpine AS frontend_builder
+FROM node:17-alpine AS frontend_builder
 
 ARG GIT_TAG
 ARG GIT_BRANCH
@@ -9,17 +9,18 @@ WORKDIR /impresso_frontend
 
 RUN apk add --no-cache git build-base python3
 
-COPY package.json package-lock.json ./
-
-RUN npm install
+ENV NODE_OPTIONS --openssl-legacy-provider
 
+COPY package.json package-lock.json ./
 COPY src ./src
 COPY static ./static
 COPY public ./public
 
-COPY .eslintrc .eslintignore .postcssrc.js .babelrc vue.config.js ./
+COPY .eslintrc.cjs .eslintignore .postcssrc.js .babelrc vue.config.js tsconfig.json ./
 COPY .env .env.production ./
 
+RUN npm install
+
 ENV PUBLIC_PATH /app/
 ENV NODE_ENV production
 ENV GIT_TAG=${GIT_TAG}

Dockerfile-dev

@@ -1,4 +1,4 @@
-FROM node:12-alpine
+FROM node:17-alpine
 
 WORKDIR /app
 

Makefile

@@ -7,6 +7,15 @@ build:
 	--build-arg GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	--build-arg GIT_REVISION=$(shell git rev-parse --short HEAD) .
 
+build-netlify:
+	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
+	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
+	GIT_REVISION=$(shell git rev-parse --short HEAD) \
+	PUBLIC_PATH=/ \
+	NODE_OPTIONS=--openssl-legacy-provider npm run build && \
+	netlify deploy --prod --dir=dist
+
+
 run-dev:
 	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
 	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \

README.md

@@ -1,22 +1,38 @@
 # impresso-frontend
-Welcome to the *impresso* app frontend website to search, explore and create personal collections from the 40 millions (and counting!) newspapers articles of the *impresso* collection.
 
-## Use docker stack for development
+Welcome to the _impresso_ app frontend website to search, explore and create personal collections from the 40 millions (and counting!) newspapers articles of the _impresso_ collection.
+
+## Install for development
+
+This is a website that uses vue2 framework build in node v17 and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install with `--openssl-legacy-provider` option
+
+```
+NODE_OPTIONS=--openssl-legacy-provider npm install
+```
+
+FInally run with:
+
+```
+NODE_OPTIONS=--openssl-legacy-provider npm start
+```
+
+### Use docker stack for development (node v12)
+
 We provide a Dockerfile-dev to streamline node 12 installation with now unsupported modules.
 
 Build the docker image with python3 support, then start the vue app using `npm start`:
+
 ```
 docker-compose -f docker-compose-dev.yml up
 ```
 
 or if make is available, `make run-dev`
 
-
 > A Vue.js project
 
 ## Build Setup
 
-``` bash
+```bash
 # install dependencies
 npm install
 
@@ -42,8 +58,11 @@ npm test
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 ## Project
-The 'impresso - Media Monitoring of the Past' project is funded by the Swiss National Science Foundation (SNSF) under  grant number [CRSII5_173719](http://p3.snf.ch/project-173719) (Sinergia program). The project aims at developing tools to process and explore large-scale collections of historical newspapers, and at studying the impact of this new tooling on historical research practices. More information at https://impresso-project.ch.
+
+The 'impresso - Media Monitoring of the Past' project is funded by the Swiss National Science Foundation (SNSF) under grant number [CRSII5_173719](http://p3.snf.ch/project-173719) (Sinergia program). The project aims at developing tools to process and explore large-scale collections of historical newspapers, and at studying the impact of this new tooling on historical research practices. More information at https://impresso-project.ch.
+
 ## License
-Copyright (C) 2020  The *impresso* team. Contributors to this program include: [Daniele Guido](https://github.com/danieleguido), [Thijs van Beek](https://github.com/tvanbeek), [Paul Schroeder](https://github.com/PaulSchroeder), [Roman Kalyakin](https://github.com/theorm).
+
+Copyright (C) 2020 The _impresso_ team. Contributors to this program include: [Daniele Guido](https://github.com/danieleguido), [Thijs van Beek](https://github.com/tvanbeek), [Paul Schroeder](https://github.com/PaulSchroeder), [Roman Kalyakin](https://github.com/theorm).
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose. See the [GNU Affero General Public License](https://github.com/impresso/impresso-frontend/blob/master/LICENSE) for more details.

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200