From 91d644e87deedb59d6de6f28f4ca114a9bf745fc Mon Sep 17 00:00:00 2001 From: montylion Date: Tue, 24 Aug 2021 23:41:55 +0200 Subject: [PATCH] Add locale tester to website --- locales/IT_it.json | 8 ++ locales/US_en.json | 8 ++ public/assets/css/localization.css | 95 +++++++++++++++++++++++ public/assets/css/main.css | 4 +- public/assets/js/locale-tester-handler.js | 8 ++ src/routers/localization.js | 17 ++++ src/server.js | 4 +- views/localization.handlebars | 28 +++++++ 8 files changed, 169 insertions(+), 3 deletions(-) create mode 100644 public/assets/css/localization.css create mode 100644 public/assets/js/locale-tester-handler.js create mode 100644 src/routers/localization.js create mode 100644 views/localization.handlebars diff --git a/locales/IT_it.json b/locales/IT_it.json index 44879f5..3cd99ef 100644 --- a/locales/IT_it.json +++ b/locales/IT_it.json @@ -135,5 +135,13 @@ "progressPage": { "title": "Il nostro progresso", "description": "Controlla il progresso del progetto e gli obiettivi! (Aggiornato circa ogni ora, non riflette TUTTI gli obiettivi e il progresso del progetto)" + }, + "localizationPage": { + "title": "Localizziamo", + "description": "Incolla il link di una localizzazione in formato JSON accessibile al pubblico per testarla sul sito", + "instructions": "Vedi le istruzioni su come localizzare", + "fileInput": "File da testare", + "filePlaceholder": "https://il.link.di/un_file.json", + "button": "Testa file" } } \ No newline at end of file diff --git a/locales/US_en.json b/locales/US_en.json index 67c1173..f84bdd2 100644 --- a/locales/US_en.json +++ b/locales/US_en.json @@ -135,5 +135,13 @@ "progressPage": { "title": "Our progress", "description": "Check the project progress and goals! (Updated every hour or so, does not reflect ALL project goals or progress)" + }, + "localizationPage": { + "title": "Let's localize", + "description": "Paste a link to a publicly accessible JSON locale to test it on the website", + "instructions": "View localization instructions", + "fileInput": "File to test", + "filePlaceholder": "https://a.link.to/the_file.json", + "button": "Test file" } } \ No newline at end of file diff --git a/public/assets/css/localization.css b/public/assets/css/localization.css new file mode 100644 index 0000000..28b0105 --- /dev/null +++ b/public/assets/css/localization.css @@ -0,0 +1,95 @@ +.localization-wrapper { + width: 100%; + min-height: calc(100vh - 155px); + margin: 0; + text-align: left; + display: flex; + justify-content: center; + align-items: center; +} + +.localization-widget { + max-width: 600px; + width: 100%; +} + +.caption { + color: var(--text-secondary); + max-width: 400px; + margin: 20px 0; +} + +.title.dot { + margin: 0; +} + +.localization-instr, +.localization-instr:visited { + display: flex; + align-items: center; + color: var(--theme-light); + text-decoration: none; + position: relative; + left: -4px; + width: fit-content; +} + +.localization-instr svg { + height: 1.3em; + margin-right: 4px; +} + +.localization-form { + padding: 36px; + background-color: #151934; + border-radius: 12px; + margin-top: 36px; +} + +.input-wrapper { + display: flex; + margin-top: 8px; +} + +.localization-form input { + appearance: none; + -webkit-appearance: none; + border: 0; + font-family: Poppins; + font-size: 1rem; + background-color: var(--btn-secondary); + border: none; + border-radius: 4px 0 0 4px; + padding: 12px 24px; + color: var(--text-secondary); + width: 20px; + flex: 2 10%; +} + +.localization-form input::placeholder { + color: var(--text-secondary-2); +} + +.localization-form input:focus { + background-color: #fff; + color: var(--btn-secondary); + transition: 200ms; + outline: none; +} + +.localization-form button { + appearance: none; + -webkit-appearance: none; + border: 0; + border-radius: 0 4px 4px 0; + font-family: Poppins; + font-size: 1rem; + color: var(--text); + padding: 12px 36px; + background: var(--btn); + cursor: pointer; +} + +footer { + margin-top: auto; +} diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 591baba..b1d6a4e 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -6,6 +6,7 @@ --btn: #673DB6; --btn-secondary: #333960; --theme: var(--btn); + --theme-light: #A185D6; --text-secondary-2: #8990C1; } @@ -16,10 +17,8 @@ body { body, .main-body { width: 100%; max-width: 100vw; - position: relative; margin: 0; color: var(--text); - display: flex; justify-content: center; font-family: Poppins, Arial; overflow-x: hidden; @@ -46,6 +45,7 @@ body, .main-body { .wrapper { width: 95%; max-width: 1590px; + margin: 0 auto; } h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after { diff --git a/public/assets/js/locale-tester-handler.js b/public/assets/js/locale-tester-handler.js new file mode 100644 index 0000000..49901bc --- /dev/null +++ b/public/assets/js/locale-tester-handler.js @@ -0,0 +1,8 @@ +const form = document.querySelector(".localization-form"); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + e.stopPropagation(); + window.location.href=`https://prete.herokuapp.com/?url=${e.target[0].value}` +}); + diff --git a/src/routers/localization.js b/src/routers/localization.js new file mode 100644 index 0000000..433772e --- /dev/null +++ b/src/routers/localization.js @@ -0,0 +1,17 @@ +const { Router } = require('express'); +const util = require('../util'); +const router = new Router(); + +router.get('/', async (request, response) => { + + const reqLocale = request.locale + const locale = util.getLocale(reqLocale.region, reqLocale.language); + + response.render('localization', { + layout: 'main', + locale, + localeString: reqLocale.toString(), + }); +}); + +module.exports = router; diff --git a/src/server.js b/src/server.js index 7b6d5ef..def2acb 100644 --- a/src/server.js +++ b/src/server.js @@ -22,7 +22,8 @@ logger.info('Importing page routers'); const routers = { home: require('./routers/home'), faq: require('./routers/faq'), - progress: require('./routers/progress') + progress: require('./routers/progress'), + localization: require('./routers/localization') }; app.use(cookieParser()) @@ -61,6 +62,7 @@ app.use(expressLocale({ app.use('/', routers.home); app.use('/faq', routers.faq); app.use('/progress', routers.progress); +app.use('/localization', routers.localization); logger.info('Creating 404 status handler'); // This works because it is the last router created diff --git a/views/localization.handlebars b/views/localization.handlebars new file mode 100644 index 0000000..72ca568 --- /dev/null +++ b/views/localization.handlebars @@ -0,0 +1,28 @@ + + +
+ + {{> header}} + +
+
+

{{ locale.localizationPage.title }}

+

{{ locale.localizationPage.description }}

+ + + {{ locale.localizationPage.instructions }} + +
+ +
+ + +
+
+
+
+
+ +{{> footer }} + +