Fix translation FR (#86)

.gitattributes

@@ -0,0 +1,9 @@
+# Text files have auto line endings
+* text=auto
+
+# Go source files always have LF line endings
+*.go text eol=lf
+
+# Disable next extensions in project "used languages" list
+*.lua linguist-detectable=false
+*.html linguist-detectable=false

.github/workflows/release.yml

@@ -5,6 +5,22 @@ on:
     types: [published]
 
 jobs:
+  purge-cdn-cache:
+    name: Purge jsDelivr CDN cache
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: fjogeleit/http-request-action@v1 # Action page: <https://github.com/fjogeleit/http-request-action>
+        with: {method: 'GET', url: 'https://purge.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'}
+
+      - uses: fjogeleit/http-request-action@v1
+        with: {method: 'GET', url: 'https://purge.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.js'}
+
+      - uses: fjogeleit/http-request-action@v1
+        with: {method: 'GET', url: 'https://purge.jsdelivr.net/gh/tarampampam/error-pages@latest/l10n/l10n.min.js'}
+
+      - uses: fjogeleit/http-request-action@v1
+        with: {method: 'GET', url: 'https://purge.jsdelivr.net/gh/tarampampam/error-pages@latest/l10n/l10n.js'}
+
   build:
     name: Build for ${{ matrix.os }} (${{ matrix.arch }})
     runs-on: ubuntu-20.04

.github/workflows/tests.yml

@@ -48,6 +48,22 @@ jobs: # Docs: <https://git.io/JvxXE>
       - name: Run linter
         run: ajv validate --all-errors --verbose -s ./schemas/config/1.0.schema.json -d ./error-pages.y*ml
 
+  lint-l10n:
+    name: Lint l10n file(s)
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with: {node-version: '16'}
+
+      - name: Install eslint
+        run: npm install -g eslint@v8 # Package page: <https://www.npmjs.com/package/eslint>
+
+      - name: Run linter
+        working-directory: l10n
+        run: eslint ./*.js
+
   go-test:
     name: Unit tests
     runs-on: ubuntu-20.04
@@ -156,6 +172,7 @@ jobs: # Docs: <https://git.io/JvxXE>
           test -f ./out/lost-in-space/404.html
           test -f ./out/app-down/404.html
           test -f ./out/connection/404.html
+          test -f ./out/matrix/404.html
 
   docker-image:
     name: Build docker image

CHANGELOG.md

@@ -4,6 +4,41 @@ All notable changes to this package will be documented in this file.
 
 The format is based on [Keep a Changelog][keepachangelog] and this project adheres to [Semantic Versioning][semver].
 
+## v2.12.1
+
+### Fixed
+
+- Fix translation 🇫🇷 [#86]
+
+[#85]:https://github.com/tarampampam/error-pages/pull/86
+
+## v2.12.0
+
+### Changed
+
+- Error pages now translated in 🇫🇷 [#82]
+
+[#82]:https://github.com/tarampampam/error-pages/pull/82
+
+## v2.11.0
+
+### Added
+
+- Template `matrix` [#81]
+
+### Fixed
+
+- Localization mistakes [#81]
+
+[#81]:https://github.com/tarampampam/error-pages/pull/81
+
+## v2.10.1
+
+### Fixed
+
+- Template `shuffle`
+- Localization mistakes
+
 ## v2.10.0
 
 ### Changed

README.md

@@ -34,7 +34,7 @@ One day you may want to replace the standard error pages of your HTTP server wit
 - Error pages can be [embedded into your own `nginx`][wiki-usage-with-nginx] docker image
 - Fully configurable (take a look at the [configuration file](https://github.com/tarampampam/error-pages/blob/master/error-pages.yml) and [project Wiki][wiki])
 - Distributed using docker image and compiled binary files
-- Localized (🇺🇸, 🇺🇦, 🇷🇺) HTML error pages (translation process [described here](https://github.com/tarampampam/error-pages/tree/master/l10n) - other translations are welcome!)
+- Localized (🇺🇸, 🇫🇷, 🇺🇦, 🇷🇺) HTML error pages (translation process [described here](https://github.com/tarampampam/error-pages/tree/master/l10n) - other translations are welcome!)
 
 ## 🧩 Install
 
@@ -124,6 +124,7 @@ Transfer/sec:    140.23MB
 |  `lost-in-space`  |    [![lost-in-space][lost-in-space-screen]][lost-in-space-link]    |
 |    `app-down`     |           [![app-down][app-down-screen]][app-down-link]            |
 |   `connection`    |        [![connection][connection-screen]][connection-link]         |
+|     `matrix`      |              [![matrix][matrix-screen]][matrix-link]               |
 
 > Note: `noise` template highly uses the CPU, be careful
 
@@ -147,6 +148,8 @@ Transfer/sec:    140.23MB
 [app-down-link]:https://tarampampam.github.io/error-pages/app-down/404.html
 [connection-screen]:https://hsto.org/webt/x4/ah/jb/x4ahjboo4-arm3bxpaash_sflmw.png
 [connection-link]:https://tarampampam.github.io/error-pages/connection/404.html
+[matrix-screen]:https://hsto.org/webt/ng/tf/oi/ngtfoiolvmq6hf15kimcxmhprhk.gif
+[matrix-link]:https://tarampampam.github.io/error-pages/matrix/404.html
 
 ## 🦾 Contributors
 

error-pages.yml

@@ -14,6 +14,7 @@ templates:
   - path: ./templates/lost-in-space.html
   - path: ./templates/app-down.html
   - path: ./templates/connection.html
+  - path: ./templates/matrix.html
 
 formats:
   json:

l10n/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+    "extends": [
+        "eslint:recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
+    "env": {
+        "browser": true
+    }
+}

l10n/l10n.js

@@ -2,156 +2,369 @@ Object.defineProperty(window, 'l10n', {
     value: new function () {
         // language codes list: <https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes>
         const data = { // all keys should be in english (it is default/main locale)
-            'Error': {ru: 'Ошибка', uk: 'Помилка'},
-            'Good luck': {ru: 'Удачи', uk: 'Успіхів'},
-            'UH OH': {ru: 'Ох', uk: 'Ох'},
-            'Request details': {ru: 'Детали запроса', uk: 'Деталі запиту'},
-            'Double-check the URL': {ru: 'Дважды проверьте URL', uk: 'Двічі перевіряйте URL-адресу'},
-            'Alternatively, go back': {ru: 'Или можете вернуться назад', uk: 'Або ви можете повернутися'},
-            'Here\'s what might have happened': {ru: 'Из-за чего это могло случиться', uk: 'Що це може статися'},
+            'Error': {
+                fr: 'Erreur',
+                ru: 'Ошибка',
+                uk: 'Помилка',
+            },
+            'Good luck': {
+                fr: 'Bonne chance',
+                ru: 'Удачи',
+                uk: 'Успіхів',
+            },
+            'UH OH': {
+                fr: 'Oups',
+                ru: 'Ох',
+                uk: 'Ох',
+            },
+            'Request details': {
+                fr: 'Détails de la requête',
+                ru: 'Детали запроса',
+                uk: 'Деталі запиту',
+            },
+            'Double-check the URL': {
+                fr: 'Vérifiez l’URL',
+                ru: 'Дважды проверьте URL',
+                uk: 'Двічі перевіряйте URL-адресу',
+            },
+            'Alternatively, go back': {
+                fr: 'Essayer de revenir en arrière',
+                ru: 'Или можете вернуться назад',
+                uk: 'Або ви можете повернутися',
+            },
+            'Here\'s what might have happened': {
+                fr: 'Voici ce qui aurait pu se passer',
+                ru: 'Из-за чего это могло случиться',
+                uk: 'Що це може статися',
+            },
             'You may have mistyped the URL': {
+                fr: 'Vous avez peut-être mal tapé l’URL',
                 ru: 'Вы могли ошибиться в URL',
-                uk: 'Ви можете зробити помилку в URL-адресі'
+                uk: 'Ви можете зробити помилку в URL-адресі',
+            },
+            'The site was moved': {
+                fr: 'Le site a été déplacé',
+                ru: 'Сайт был перемещён',
+                uk: 'Сайт був переміщений',
+            },
+            'It was never here': {
+                fr: 'Il n’a jamais été ici',
+                ru: 'Он никогда не был здесь',
+                uk: 'Він ніколи не був тут',
             },
-            'The site was moved': {ru: 'Сайт был перемещён', uk: 'Сайт був переміщений'},
-            'It was never here': {ru: 'Он никогда не был здесь', uk: 'Він ніколи не був тут'},
 
-            'Bad Request': {ru: 'Некорректный запрос', uk: 'Неправильний запит'},
+            'Bad Request': {
+                fr: 'Mauvaise requête',
+                ru: 'Некорректный запрос',
+                uk: 'Неправильний запит',
+            },
             'The server did not understand the request': {
+                fr: 'Le serveur ne comprend pas la requête',
                 ru: 'Сервер не смог обработать запрос из-за ошибки в нём',
-                uk: 'Сервер не міг обробити запит через помилку в ньому'
+                uk: 'Сервер не міг обробити запит через помилку в ньому',
+            },
+            'Unauthorized': {
+                fr: 'Non autorisé',
+                ru: 'Запрос не авторизован',
+                uk: 'Несанкціонований доступ',
             },
-            'Unauthorized': {ru: 'Не фвторизован', uk: 'Несанкціонований доступ'},
             'The requested page needs a username and a password': {
+                fr: 'La page demandée nécessite un nom d’utilisateur et un mot de passe',
                 ru: 'Для доступа к странице требуется логин и пароль',
-                uk: 'Щоб отримати доступ до сторінки, потрібний логін та пароль'
+                uk: 'Щоб отримати доступ до сторінки, потрібний логін та пароль',
+            },
+            'Forbidden': {
+                fr: 'Interdit',
+                ru: 'Запрещено',
+                uk: 'Заборонено',
             },
-            'Forbidden': {ru: 'Запрещено', uk: 'Заборонено'},
             'Access is forbidden to the requested page': {
+                fr: 'Accès interdit à la page demandée',
                 ru: 'Доступ к странице запрещён',
-                uk: 'Доступ до сторінки заборонено'
+                uk: 'Доступ до сторінки заборонено',
+            },
+            'Not Found': {
+                fr: 'Introuvable',
+                ru: 'Страница не найдена',
+                uk: 'Сторінка не знайдена',
             },
-            'Not Found': {ru: 'Не найдено', uk: 'Не знайдено'},
             'The server can not find the requested page': {
+                fr: 'Le serveur ne peut trouver la page demandée',
                 ru: 'Сервер не смог найти запрашиваемую страницу',
-                uk: 'Сервер не міг знайти запитану сторінку'
+                uk: 'Сервер не міг знайти запитану сторінку',
+            },
+            'Method Not Allowed': {
+                fr: 'Méthode Non Autorisée',
+                ru: 'Метод не поддерживается',
+                uk: 'Неприпустимий метод',
             },
-            'Method Not Allowed': {ru: 'Метод не поддерживается', uk: 'Неприпустимий метод'},
             'The method specified in the request is not allowed': {
+                fr: 'La méthode spécifiée dans la requête n’est pas autorisée',
                 ru: 'Указанный в запросе метод не поддерживается',
-                uk: 'Метод, зазначений у запиті, не підтримується'
+                uk: 'Метод, зазначений у запиті, не підтримується',
+            },
+            'Proxy Authentication Required': {
+                fr: 'Authentification proxy requise',
+                ru: 'Нужна аутентификация прокси',
+                uk: 'Потрібна ідентифікація проксі',
             },
-            'Proxy Authentication Required': {ru: 'Нужна аутентификация прокси', uk: 'Потрібна ідентифікація проксі'},
             'You must authenticate with a proxy server before this request can be served': {
+                fr: 'Vous devez vous authentifier avec un serveur proxy avant que cette requête puisse être servie',
                 ru: 'Вы должны быть авторизованы на прокси сервере для обработки этого запроса',
-                uk: 'Ви повинні увійти до проксі-сервера для обробки цього запиту'
+                uk: 'Ви повинні увійти до проксі-сервера для обробки цього запиту',
+            },
+            'Request Timeout': {
+                fr: 'Requête expiré',
+                ru: 'Истекло время ожидания',
+                uk: 'Час запиту закінчився',
             },
-            'Request Timeout': {ru: 'Истекло время ожидания', uk: 'Час запиту закінчився'},
             'The request took longer than the server was prepared to wait': {
-                ru: 'Время ожидания сервером передачи от клиента истекло',
-                uk: 'Трансфер термінів очікуваного сервера від клієнта закінчився'
+                fr: 'La requête prend plus de temps que prévu',
+                ru: 'Отправка запроса заняла слишком много времени',
+                uk: 'Надсилання запиту зайняв занадто багато часу',
+            },
+            'Conflict': {
+                fr: 'Conflit',
+                ru: 'Конфликт',
+                uk: 'Конфлікт',
             },
-            'Conflict': {ru: 'Конфликт', uk: 'Конфлікт'},
             'The request could not be completed because of a conflict': {
+                fr: 'La requête n’a pas pu être complétée à cause d’un conflit',
                 ru: 'Запрос не может быть обработан из-за конфликта',
-                uk: 'Запит не може бути оброблений через конфлікт'
+                uk: 'Запит не може бути оброблений через конфлікт',
+            },
+            'Gone': {
+                fr: 'Supprimé',
+                ru: 'Удалено',
+                uk: 'Вилучений',
             },
-            'Gone': {ru: 'Удалён', uk: 'Зник'},
             'The requested page is no longer available': {
+                fr: 'La page demandée n’est plus disponible',
                 ru: 'Запрошенная страница была удалена',
-                uk: 'Запитана сторінка була видалена'
+                uk: 'Запитана сторінка була видалена',
+            },
+            'Length Required': {
+                fr: 'Longueur requise',
+                ru: 'Необходима длина',
+                uk: 'Потрібно вказати розмір',
             },
-            'Length Required': {ru: 'Необходима длина', uk: 'Потрібно вказати розмір'},
             'The "Content-Length" is not defined. The server will not accept the request without it': {
+                fr: 'Le "Content-Length" n’est pas défini. Le serveur ne prendra pas en compte la requête',
                 ru: 'Заголовок "Content-Length" не был передан. Сервер не может обработать запрос без него',
-                uk: 'Заголовок "Content-Length" не був переданий. Сервер не може обробити запит без нього'
+                uk: 'Заголовок "Content-Length" не був переданий. Сервер не може обробити запит без нього',
+            },
+            'Precondition Failed': {
+                fr: 'Échec de la condition préalable',
+                ru: 'Условие ложно',
+                uk: 'Збій під час обробки попередньої умови',
             },
-            'Precondition Failed': {ru: 'Условие ложно', uk: 'Збій під час обробки попередньої умови'},
             'The pre condition given in the request evaluated to false by the server': {
+                fr: 'La précondition donnée dans la requête a été évaluée comme étant fausse par le serveur',
                 ru: 'Ни одно из условных полей заголовка запроса не было выполнено',
-                uk: 'Жодна з умовних полів заголовка запиту не була виконана'
+                uk: 'Жодна з умовних полів заголовка запиту не була виконана',
+            },
+            'Payload Too Large': {
+                fr: 'Charge trop volumineuse',
+                ru: 'Слишком большой запрос',
+                uk: 'Занадто великий запит',
             },
-            'Payload Too Large': {ru: 'Тело запроса слишком велико', uk: 'Тіло запиту перевищує допустимий розмір'},
             'The server will not accept the request, because the request entity is too large': {
+                fr: 'Le serveur ne prendra pas en compte la requête, car l’entité de la requête est trop volumineuse',
                 ru: 'Сервер не может обработать запрос, так как он слишком большой',
-                uk: 'Сервер не може обробити запит, оскільки він занадто великий'
+                uk: 'Сервер не може обробити запит, оскільки він занадто великий',
+            },
+            'Requested Range Not Satisfiable': {
+                fr: 'Requête non satisfaisante',
+                ru: 'Диапазон не достижим',
+                uk: 'Запитуваний діапазон недосяжний',
             },
-            'Requested Range Not Satisfiable': {ru: 'Диапазон не достижим', uk: 'Запитуваний діапазон недосяжний'},
             'The requested byte range is not available and is out of bounds': {
+                fr: 'Le byte range demandé n’est pas disponible et est hors des limites',
                 ru: 'Запрошенный диапазон данных недоступен или вне допустимых пределов',
-                uk: 'Описаний діапазон даних недоступний або з допустимих меж'
+                uk: 'Описаний діапазон даних недоступний або з допустимих меж',
+            },
+            'I\'m a teapot': {
+                fr: 'Je suis une théière',
+                ru: 'Я чайник',
+                uk: 'Я чайник',
             },
-            'I\'m a teapot': {ru: 'Я чайник', uk: 'Я чайник'},
             'Attempt to brew coffee with a teapot is not supported': {
+                fr: 'Tenter de préparer du café avec une théière n’est pas pris en charge',
                 ru: 'Попытка заварить кофе в чайнике обречена на фиаско',
-                uk: 'Спроба виварити каву в чайник приречена на фіаско'
+                uk: 'Спроба виварити каву в чайник приречена на фіаско',
+            },
+            'Too Many Requests': {
+                fr: 'Trop de requêtes',
+                ru: 'Слишком много запросов',
+                uk: 'Занадто багато запитів',
             },
-            'Too Many Requests': {ru: 'Слишком много запросов', uk: 'Занадто багато запитів'},
             'Too many requests in a given amount of time': {
+                fr: 'Trop de requêtes dans un délai donné',
                 ru: 'Отправлено слишком много запросов за короткое время',
-                uk: 'Надіслано занадто багато запитів на короткий час'
+                uk: 'Надіслано занадто багато запитів на короткий час',
+            },
+            'Internal Server Error': {
+                fr: 'Erreur interne du serveur',
+                ru: 'Внутренняя ошибка сервера',
+                uk: 'Внутрішня помилка сервера',
             },
-            'Internal Server Error': {ru: 'Внутренняя ошибка сервера', uk: 'Внутрішня помилка сервера'},
             'The server met an unexpected condition': {
+                fr: 'Le serveur a rencontré une condition inattendue',
                 ru: 'Произошло что-то неожиданное на сервере',
-                uk: 'На сервері було щось несподіване'
+                uk: 'На сервері було щось несподіване',
+            },
+            'Bad Gateway': {
+                fr: 'Mauvaise passerelle',
+                ru: 'Ошибка шлюза',
+                uk: 'Помилка шлюзу',
             },
-            'Bad Gateway': {ru: 'Ошибка шлюза', uk: 'Помилка шлюзу'},
             'The server received an invalid response from the upstream server': {
+                fr: 'Le serveur a reçu une réponse invalide du serveur distant',
                 ru: 'Сервер получил некорректный ответ от вышестоящего сервера',
-                uk: 'Сервер отримав неправильну відповідь з сервера Upstream'
+                uk: 'Сервер отримав неправильну відповідь з сервера Upstream',
+            },
+            'Service Unavailable': {
+                fr: 'Service indisponible',
+                ru: 'Сервис недоступен',
+                uk: 'Сервіс недоступний',
             },
-            'Service Unavailable': {ru: 'Сервис недоступен', uk: 'Сервіс недоступний'},
             'The server is temporarily overloading or down': {
+                fr: 'Le serveur est temporairement en surcharge ou indisponible',
                 ru: 'Сервер временно не может обрабатывать запросы по техническим причинам',
-                uk: 'Сервер тимчасово не може обробляти запити з технічних причин'
+                uk: 'Сервер тимчасово не може обробляти запити з технічних причин',
+            },
+            'Gateway Timeout': {
+                fr: 'Expiration Passerelle',
+                ru: 'Шлюз не отвечает',
+                uk: 'Шлюз не відповідає',
             },
-            'Gateway Timeout': {ru: 'Шлюз не отвечает', uk: 'Шлюз не відповідає'},
             'The gateway has timed out': {
+                fr: 'Le temps d’attente de la passerelle est dépassé',
                 ru: 'Сервер не дождался ответа от вышестоящего сервера',
-                uk: 'Сервер не чекав відповіді від сервера Upstream'
+                uk: 'Сервер не чекав відповіді від сервера Upstream',
+            },
+            'HTTP Version Not Supported': {
+                fr: 'Version HTTP non prise en charge',
+                ru: 'Версия HTTP не поддерживается',
+                uk: 'Версія НТТР не підтримується',
             },
-            'HTTP Version Not Supported': {ru: 'Версия HTTP не поддерживается', uk: 'Версія НТТР не підтримується'},
             'The server does not support the "http protocol" version': {
+                fr: 'Le serveur ne supporte pas la version du protocole HTTP',
                 ru: 'Сервер не поддерживает запрошенную версию HTTP протокола',
-                uk: 'Сервер не підтримує запитану версію HTTP-протоколу'
+                uk: 'Сервер не підтримує запитану версію HTTP-протоколу',
             },
 
-            'Host': {ru: 'Хост', uk: 'Хост'},
-            'Original URI': {ru: 'Исходный URI', uk: 'Вихідний URI'},
-            'Forwarded for': {ru: 'Перенаправлен', uk: 'Перенаправлений'},
-            'Namespace': {ru: 'Пространство имён', uk: 'Простір імен'},
-            'Ingress name': {ru: 'Имя Ingress', uk: 'Ім\'я Ingress'},
-            'Service name': {ru: 'Имя сервиса', uk: 'Ім\'я сервісу'},
-            'Service port': {ru: 'Порт сервиса', uk: 'Порт сервісу'},
-            'Request ID': {ru: 'ID запроса', uk: 'ID запиту'},
-            'Timestamp': {ru: 'Временная метка', uk: 'Тимчасова мітка'},
+            'Host': {
+                fr: 'Hôte',
+                ru: 'Хост',
+                uk: 'Хост',
+            },
+            'Original URI': {
+                fr: 'URI d’origine',
+                ru: 'Исходный URI',
+                uk: 'Вихідний URI',
+            },
+            'Forwarded for': {
+                fr: 'Transmis pour',
+                ru: 'Перенаправлен',
+                uk: 'Перенаправлений',
+            },
+            'Namespace': {
+                fr: 'Espace de noms',
+                ru: 'Пространство имён',
+                uk: 'Простір імен',
+            },
+            'Ingress name': {
+                fr: 'Nom ingress',
+                ru: 'Имя Ingress',
+                uk: 'Ім\'я Ingress',
+            },
+            'Service name': {
+                fr: 'Nom du service',
+                ru: 'Имя сервиса',
+                uk: 'Ім\'я сервісу',
+            },
+            'Service port': {
+                fr: 'Port du service',
+                ru: 'Порт сервиса',
+                uk: 'Порт сервісу',
+            },
+            'Request ID': {
+                fr: 'Identifiant de la requête',
+                ru: 'ID запроса',
+                uk: 'ID запиту',
+            },
+            'Timestamp': {
+                fr: 'Horodatage',
+                ru: 'Временная метка',
+                uk: 'Тимчасова мітка',
+            },
 
-            'client-side error': {ru: 'ошибка на стороне клиента', uk: 'помилка на стороні клієнта'},
-            'server-side error': {ru: 'ошибка на стороне сервера', uk: 'помилка на стороні сервера'},
+            'client-side error': {
+                fr: 'Erreur Client',
+                ru: 'ошибка на стороне клиента',
+                uk: 'помилка на стороні клієнта',
+            },
+            'server-side error': {
+                fr: 'Erreur Serveur',
+                ru: 'ошибка на стороне сервера',
+                uk: 'помилка на стороні сервера',
+            },
 
-            'Your Client': {ru: 'Ваш Браузер', uk: 'Ваш Браузер'},
-            'Network': {ru: 'Сеть', uk: 'Сіть'},
-            'Web Server': {ru: 'Web Сервер', uk: 'Web Сервер'},
-            'What happened?': {ru: 'Что произошло?', uk: 'Що сталося?'},
-            'What can i do?': {ru: 'Что можно сделать?', uk: 'Що можна зробити?'},
+            'Your Client': {
+                fr: 'Votre Client',
+                ru: 'Ваш Браузер',
+                uk: 'Ваш Браузер',
+            },
+            'Network': {
+                fr: 'Réseau',
+                ru: 'Сеть',
+                uk: 'Сіть',
+            },
+            'Web Server': {
+                fr: 'Serveur Web',
+                ru: 'Web Сервер',
+                uk: 'Web Сервер',
+            },
+            'What happened?': {
+                fr: 'Que s’est-il passé ?',
+                ru: 'Что произошло?',
+                uk: 'Що сталося?',
+            },
+            'What can i do?': {
+                fr: 'Que puis-je faire ?',
+                ru: 'Что можно сделать?',
+                uk: 'Що можна зробити?',
+            },
             'Please try again in a few minutes': {
+                fr: 'Veuillez réessayer dans quelques minutes',
                 ru: 'Пожалуйста, попробуйте повторить запрос ещё раз чуть позже',
-                uk: 'Будь ласка, спробуйте повторити запит ще раз трохи пізніше'
+                uk: 'Будь ласка, спробуйте повторити запит ще раз трохи пізніше',
+            },
+            'Working': {
+                fr: 'Opérationnel',
+                ru: 'Работает',
+                uk: 'Працює',
+            },
+            'Unknown': {
+                fr: 'Inconnu',
+                ru: 'Неизвестно',
+                uk: 'Невідомо',
             },
-            'Working': {ru: 'Работает', uk: 'Працює'},
-            'Unknown': {ru: 'Неизвестно', uk: 'Невідомо'},
             'Please try to change the request method, headers, payload, or URL': {
+                fr: 'Veuillez essayer de changer la méthode de requête, les en-têtes, le contenu ou l’URL',
                 ru: 'Пожалуйста, попробуйте изменить метод запроса, заголовки, его содержимое или URL',
-                uk: 'Будь ласка, спробуйте змінити метод запиту, заголовки, його вміст або URL-адресу'
+                uk: 'Будь ласка, спробуйте змінити метод запиту, заголовки, його вміст або URL-адресу',
             },
             'Please check your authorization data': {
+                fr: 'Veuillez vérifier vos données d’autorisation',
                 ru: 'Пожалуйста, проверьте данные авторизации',
-                uk: 'Будь ласка, перевірте дані авторизації'
+                uk: 'Будь ласка, перевірте дані авторизації',
             },
             'Please double-check the URL and try again': {
+                fr: 'Veuillez vérifier l’URL et réessayer',
                 ru: 'Пожалуйста, дважды проверьте URL и попробуйте снова',
-                uk: 'Будь ласка, двічі перевірте URL-адресу і спробуйте знову'
+                uk: 'Будь ласка, двічі перевірте URL-адресу і спробуйте знову',
             },
         };
 
@@ -186,11 +399,11 @@ Object.defineProperty(window, 'l10n', {
         this.translate = function (token, def) {
             const t = serializeToken(token);
 
-            if (activeLocale === 'en' && data.hasOwnProperty(t)) {
+            if (activeLocale === 'en' && Object.prototype.hasOwnProperty.call(data, t)) {
                 return token
             }
 
-            if (data.hasOwnProperty(t) && data[t].hasOwnProperty(activeLocale)) {
+            if (Object.prototype.hasOwnProperty.call(data, t) && Object.prototype.hasOwnProperty.call(data[t], activeLocale)) {
                 return data[t][activeLocale];
             }
 
@@ -215,7 +428,7 @@ Object.defineProperty(window, 'l10n', {
                 if (localized !== undefined) {
                     $el.innerText = localized;
                 } else {
-                    console.debug(`Unsupported l10n token detected: "${token}"`, $el);
+                    console.debug(`Unsupported l10n token detected: "${token}" (locale "${activeLocale}")`, $el);
                 }
             });
         };

l10n/readme.md

@@ -1,8 +1,8 @@
-# Localization
+# 🔤 Localization
 
 [![jsDelivr hits](https://img.shields.io/jsdelivr/gh/hm/tarampampam/error-pages)](https://www.jsdelivr.com/package/gh/tarampampam/error-pages)
 
-This directory contains file [l10n.js](l10n.js) for the error pages localization. The logic is very simple - pages load this file using [jsdelivr.com](https://www.jsdelivr.com/) as a CDN for [versioned content from the GitHub repository](https://www.jsdelivr.com/features#gh), and the script from this file translate tags content using the special HTML attribute `data-l10n`.
+This directory contains file [l10n.js](l10n.js) for the error pages localization. The working logic is very simple - pages load this script using [jsdelivr.com](https://www.jsdelivr.com/) as a CDN for [versioned content from the GitHub repository](https://www.jsdelivr.com/features#gh), and it translates tag content with the special HTML attribute `data-l10n`.
 
 By default, pages markup contains strings in English (`en` locale). If you want to localize the error pages on the different locales, you should:
 
@@ -10,3 +10,7 @@ By default, pages markup contains strings in English (`en` locale). If you want
 - Make a fork of this repository
 - Edit file [l10n.js](l10n.js) in `data` section (append new localized strings) using locale name from the step 1
 - Make a PR with your changes
+
+## 👍 Translators
+
+- 🇫🇷 French by [@jvin042](https://github.com/jvin042)

templates/connection.html

@@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
@@ -259,4 +263,8 @@
         })(document.createElement('script'), document.body);
     }
 </script>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>

templates/matrix.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, nofollow"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>{{ message }} ({{ code }})</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(0, 0, 0, 0.12)}
+        body,html{margin:0;padding:0;background-color:#000;height:100vh}
+        #matrix{display:block;position:fixed;width:100vw;height:100vh}
+        .container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
+        .container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
+        .container .message h1{margin:0;font-size:52px}
+        .container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
+        /* {{ if show_details }} */
+        .container .details{margin-top:20px}
+        .container .details ul{padding:0}
+        .container .details code,.container .details span{font-size:11px}
+        .container .details code{padding-left:7px}
+        /* {{ end }} */
+        .hidden {display:none}
+        @media screen and (max-width:820px){
+            :root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
+            .container .message h1{font-size:38px}
+            .container .message p{font-size:13px}
+            /* {{ if show_details }} */
+            .container .details code,.container .details span{font-size:11px}
+            /* {{ end }} */
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <ul id="matrix-words" class="hidden">
+        <li>{{ code }}</li>
+        <li>{{ message }}</li>
+        <li>{{ description }}</li>
+        <li>{{ code }} {{ message }}</li>
+    </ul>
+
+    <div class="message">
+        <h1>{{ code }}: <span data-l10n>{{ message }}</span></h1>
+        <p data-l10n>{{ description }}</p>
+
+        {{ if show_details }}
+        <div class="details">
+            <ul>
+                {{- if host }}<li><span><span data-l10n>Host</span>:</span> <code>{{ host }}</code></li>{{ end -}}
+                {{- if original_uri }}<li><span><span data-l10n>Original URI</span>:</span> <code>{{ original_uri }}</code></li>{{ end -}}
+                {{- if forwarded_for }}<li><span><span data-l10n>Forwarded for</span>:</span> <code>{{ forwarded_for }}</code></li>{{ end -}}
+                {{- if namespace }}<li><span><span data-l10n>Namespace</span>:</span> <code>{{ namespace }}</code></li>{{ end -}}
+                {{- if ingress_name }}<li><span><span data-l10n>Ingress name</span>:</span> <code>{{ ingress_name }}</code></li>{{ end -}}
+                {{- if service_name }}<li><span><span data-l10n>Service name</span>:</span> <code>{{ service_name }}</code></li>{{ end -}}
+                {{- if service_port }}<li><span><span data-l10n>Service port</span>:</span> <code>{{ service_port }}</code></li>{{ end -}}
+                {{- if request_id }}<li><span><span data-l10n>Request ID</span>:</span> <code>{{ request_id }}</code></li>{{ end -}}
+                <li><span><span data-l10n>Timestamp</span>:</span> <code>{{ now.Unix }}</code></li>
+            </ul>
+        </div>
+        {{ end }}
+    </div>
+</div>
+
+<canvas id="matrix"></canvas>
+
+<script>
+    'use strict';
+
+    /**
+     * @param {HTMLCanvasElement} $canvas
+     * @constructor
+     */
+    const Matrix = function ($canvas) {
+        const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
+
+        /**
+         * @return {string}
+         */
+        const getRandomSymbol = function () {
+            return symbols[Math.floor(Math.random() * symbols.length)];
+        }
+
+        const ctx = $canvas.getContext('2d');
+        ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+
+        this.redrawInterval = 90; // fade oud speed
+        this.glyphSize = 0;
+        this.rowsCapacity = 0;
+        this.columnsCapacity = 0;
+
+        /**
+         * @return {void}
+         */
+        this.init = () => {
+            $canvas.width = $canvas.clientWidth;
+            $canvas.height = $canvas.clientHeight;
+
+            this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
+            this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
+            this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
+        };
+
+        /**
+         * @param {string} symbol
+         * @param {number} row
+         * @param {number} column
+         * @param {string} color
+         */
+        const drawSymbol = (symbol, row, column, color) => {
+            if (row > this.rowsCapacity || column > this.columnsCapacity) {
+                return;
+            }
+
+            ctx.fillStyle = color;
+            ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
+
+            if (symbol.length > 1) {
+                symbol = symbol.charAt(0); // only one char is allowed
+            }
+
+            let xOffset = 0, charCode = symbol.charCodeAt(0);
+
+            if (charCode >= 33 && charCode <= 126) { // is ascii
+                xOffset = this.glyphSize / 5;
+            }
+
+            ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
+        };
+
+        /**
+         * @param {number} column
+         * @param {number} speed Lowest = fastest, largest = slowest
+         * @param {string?} text
+         * @param {number?} offset
+         */
+        const drawLine = (column, speed, text, offset) => {
+            let cursor = 0;
+
+            const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
+                frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
+
+            const handler = window.setInterval(() => {
+                if (column > this.columnsCapacity) {
+                    return window.clearInterval(handler);
+                }
+
+                if (cursor <= this.rowsCapacity) {
+                    let symbol = getRandomSymbol();
+
+                    if (typeof text === 'string' && typeof offset === 'number') {
+                        if (cursor >= offset && text.length >= cursor - offset) {
+                            symbol = text.charAt(cursor - offset);
+                        }
+                    }
+
+                    if (typeof symbol === 'string' && symbol !== ' ') {
+                        const prev = cursor;
+
+                        window.setTimeout(() => { // redraw with a green color
+                            drawSymbol(symbol, prev, column, tailColor);
+                        }, speed / 1.3);
+
+                        drawSymbol(symbol, cursor, column, frontColor); // white color first
+                    }
+
+                    cursor++;
+                } else {
+                    window.clearInterval(handler);
+                }
+            }, speed);
+        };
+
+        /**
+         * @return {void}
+         */
+        this.redraw = () => {
+            ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
+            ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
+        };
+
+        let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
+
+        /**
+         * @param {HTMLUListElement?} $linesList
+         */
+        this.run = ($linesList) => {
+            if (redrawIntervalHandler === undefined) {
+                redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
+            }
+
+            if (dropsIntervalHandler === undefined) {
+                const fn = () => {
+                    const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
+                        minSpeed = 200, maxSpeed = 50,
+                        randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
+
+                    const list = [];
+                    let line = undefined, offset = undefined;
+
+                    if ($linesList !== undefined) {
+                        Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
+                            const text = $li.innerText.trim();
+
+                            if (text.length > 0) {
+                                list.push(text);
+                            }
+                        });
+
+                        if (list.length > 0 && Math.random() > 0.4) {
+                            line = list[Math.floor(Math.random() * list.length)];
+                            offset = Math.floor(Math.random() * line.length);
+
+                            if (offset <= 5) {
+                                offset *= 3;
+                            }
+                        }
+                    }
+
+                    drawLine(randomColumn, randomSpeed, line, offset);
+
+                    if (dropsIntervalHandler !== undefined) {
+                        window.clearInterval(dropsIntervalHandler);
+                        dropsIntervalHandler = undefined;
+                    }
+
+                    dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
+                };
+
+                fn();
+            }
+        };
+
+        /**
+         * @return {void}
+         */
+        this.stop = () => {
+            if (redrawIntervalHandler !== undefined) {
+                window.clearInterval(redrawIntervalHandler);
+                redrawIntervalHandler = undefined;
+            }
+
+            if (dropsIntervalHandler !== undefined) {
+                window.clearInterval(dropsIntervalHandler);
+                dropsIntervalHandler = undefined;
+            }
+        };
+
+        if (typeof ResizeObserver === 'function') {
+            (new ResizeObserver(this.init)).observe($canvas);
+        } else {
+            this.init();
+        }
+    };
+
+    (new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
+
+    if (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
+        ((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
+            s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
+            s.async = s.defer = true;
+            s.addEventListener('load', () => p.removeChild(s));
+            p.appendChild(s);
+        })(document.createElement('script'), document.body);
+    }
+</script>
+</body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>

templates/shuffle.html

@@ -72,7 +72,10 @@
 <body>
 <div class="flex-center full-height">
     <div>
-        <span id="error_text">{{ code }}: <span data-l10n>{{ message }}</span></span>
+        <div id="error_text">
+            <span class="source">{{ code }}: <span data-l10n>{{ message }}</span></span>
+            <span class="target"></span>
+        </div>
         {{ if show_details }}
         <div class="hidden" id="details">
             <table>
@@ -137,23 +140,74 @@
 <script>
     'use strict';
 
-    const $errorText = document.getElementById('error_text'),
-        characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
-    let text = $errorText.innerText, progress = 0;
+    /**
+     * @param {HTMLElement} $el
+     */
+    const Shuffle = function ($el) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
+            $source = $el.querySelector('.source'), $target = $el.querySelector('.target');
 
-    const scrambleInterval = window.setInterval(function () {
-        let newText = text;
+        let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
 
-        for (let i = 0; i < text.length; i++) {
-            if (i >= progress) {
-                newText = newText.substr(0, i) +
-                    characters[Math.round(Math.random() * (characters.length - 1))] +
-                    newText.substr(i + 1);
+        /**
+         * @param {Number} len
+         * @return {string}
+         */
+        const getRandomizedString = function (len) {
+            let s = '';
+
+            for (let i = 0; i < len; i++) {
+                s += chars[Math.floor(Math.random() * chars.length)];
             }
-        }
 
-        $errorText.innerText = newText;
-    }, 450 / 60);
+            return s;
+        };
+
+        this.start = function () {
+            $source.style.display = 'none';
+            $target.style.display = 'block';
+
+            scrambleInterval = window.setInterval(() => {
+                if (cursor <= $source.innerText.length) {
+                    $target.innerText = $source.innerText.substring(0, cursor) + getRandomizedString($source.innerText.length - cursor);
+                }
+            }, 450 / 30);
+
+            cursorDelayInterval = window.setTimeout(() => {
+                cursorInterval = window.setInterval(() => {
+                    if (cursor > $source.innerText.length - 1) {
+                        this.stop();
+                    }
+
+                    cursor++;
+                }, 70);
+            }, 350);
+        };
+
+        this.stop = function () {
+            $source.style.display = 'block';
+            $target.style.display = 'none';
+            $target.innerText = '';
+            cursor = 0;
+
+            if (scrambleInterval !== undefined) {
+                window.clearInterval(scrambleInterval);
+                scrambleInterval = undefined;
+            }
+
+            if (cursorInterval !== undefined) {
+                window.clearInterval(cursorInterval);
+                cursorInterval = undefined;
+            }
+
+            if (cursorDelayInterval !== undefined) {
+                window.clearInterval(cursorDelayInterval);
+                cursorDelayInterval = undefined;
+            }
+        };
+    };
+
+    (new Shuffle(document.getElementById('error_text'))).start();
 
     // {{ if show_details }}
     window.setTimeout(function () {
@@ -161,22 +215,11 @@
     }, 550);
     // {{ end }}
 
-    window.setTimeout(function () {
-        let revealInterval = window.setInterval(function () {
-            if (progress < text.length) {
-                progress++;
-            } else {
-                window.clearInterval(revealInterval);
-                window.clearInterval(scrambleInterval);
-            }
-        }, 70);
-    }, 350);
-
     if (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
         ((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
             s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
             s.async = s.defer = true;
-            s.addEventListener('load', () => {p.removeChild(s); text = $errorText.innerText});
+            s.addEventListener('load', () => p.removeChild(s));
             p.appendChild(s);
         })(document.createElement('script'), document.body);
     }