Feature/add localization

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('gts/.prettierrc.json')
+}

i18n.js

@@ -0,0 +1,12 @@
+// We use sub-path routing. To change to domain routing, see https://nextjs.org/docs/advanced-features/i18n-routing#domain-routing
+module.exports = {
+  // These are all the locales you want to support in
+  // your application
+  locales: ['en', 'nl', 'de', 'fr'],
+  // This is the default locale you want to be used when visiting
+  // a non-locale prefixed path e.g. `/hello`
+  defaultLocale: 'en',
+  pages: {
+    '/': ['home', 'keyboardApp', 'tutorApp'],
+  },
+};

locales/de/home.json

@@ -0,0 +1,8 @@
+{
+  "title": "macht das Erlernen von Braille schnell, kostenlos und macht Spaß",
+  "madeBy": "Brailliac wurde von Luke Needham entwickelt, um das Erlernen der Brailleschrift zugänglicher und angenehmer zu machen.",
+  "support": "Wenn Ihnen meine Arbeit Spaß macht, können Sie mich unterstützen über ",
+  "downloadNow": "Jetzt herunterladen",
+  "freeDescription": "Kostenlos auf allen Android-Geräten",
+  "scroll": "Scrollen Sie, um zu sehen, wie..."
+}

locales/de/keyboardApp.json

@@ -0,0 +1,20 @@
+{
+  "detailPage1": {
+    "title": "Braille-Eingabe",
+    "description": "Braille-Zellen direkt in ein beliebiges Textfeld eingeben, in jeder App"
+  },
+  "detailPage2": {
+    "title": "Automatisch übersetzen",
+    "description": "Oder Symbole während der Eingabe automatisch übersetzen"
+  },
+  "detailPage3": {
+    "title": "Jederzeit",
+    "description": "Egal was Sie tippen, tun Sie es, während Sie Braille üben"
+  },
+  "detailPage4": {
+    "title": "Anpassen",
+    "description": "Wählen Sie die perfekte Tastaturgröße für Ihren Bildschirm"
+  },
+  "name": "Brailliac: Braille-Tastatur",
+  "description": "Braille beim Tippen üben!"
+}

locales/de/tutorApp.json

@@ -0,0 +1,24 @@
+{
+  "name": "Brailliac: Braille-Lehrer",
+  "description": "Alles was Sie brauchen, um Braille zu lernen!",
+  "detailPage1": {
+    "title": "Wörterbuch",
+    "description": "Symbole schnell und einfach nachschlagen, über verschiedene Braille-Codes hinweg"
+  },
+  "detailPage2": {
+    "title": "Praxis",
+    "description": "Wählen Sie genau aus, was gebohrt werden soll, oder lassen Sie die App Ihre Schwachstellen herausfinden."
+  },
+  "detailPage3": {
+    "title": "Herausforderung",
+    "description": "Beim Übersetzen gegen die Uhr antreten"
+  },
+  "detailPage4": {
+    "title": "Übersetzung",
+    "description": "Echte Sätze in und aus Braille übersetzen"
+  },
+  "detailPage5": {
+    "title": "Aufsteigen",
+    "description": "Sammeln Sie Punkte, während Sie lernen, neue Funktionen und Themen freizuschalten"
+  }
+}

locales/en/home.json

@@ -0,0 +1,8 @@
+{
+  "title": "makes learning Braille fast, free, and fun",
+  "madeBy": "Brailliac was created by Luke Needham, to make learning Braille more accessible and enjoyable.",
+  "support": "If you enjoy my work, you can support me via ",
+  "downloadNow": "Download Now",
+  "freeDescription": "Free on all Android devices",
+  "scroll": "Scroll to see how..."
+}

locales/en/keyboardApp.json

@@ -0,0 +1,20 @@
+{
+  "detailPage1": {
+    "title": "Braille Input",
+    "description": "Type Braille cells directly into any text field, in any app"
+  },
+  "detailPage2": {
+    "title": "Auto-translate",
+    "description": "Or, automatically translate symbols as you type"
+  },
+  "detailPage3": {
+    "title": "At any time",
+    "description": "No matter what you’re typing, do it while practising Braille"
+  },
+  "detailPage4": {
+    "title": "Customise",
+    "description": "Pick the perfect keyboard size to fit your screen"
+  },
+  "name": "Brailliac: Braille Keyboard",
+  "description": "Practise Braille while typing!"
+}

locales/en/tutorApp.json

@@ -0,0 +1,24 @@
+{
+  "name": "Brailliac: Braille Tutor",
+  "description": "Everything you need to learn Braille!",
+  "detailPage1": {
+    "title": "Dictionary",
+    "description": "Look up symbols quickly and easily, across various Braille codes"
+  },
+  "detailPage2": {
+    "title": "Practise",
+    "description": "Pick exactly what to drill, or let the app figure out your weak-points"
+  },
+  "detailPage3": {
+    "title": "Challenge",
+    "description": "Compete in translations against the clock"
+  },
+  "detailPage4": {
+    "title": "Translation",
+    "description": "Translate real sentences both to and from Braille"
+  },
+  "detailPage5": {
+    "title": "Level Up",
+    "description": "Earn points while learning to unlock new features and themes"
+  }
+}

locales/fr/home.json

@@ -0,0 +1,8 @@
+{
+  "title": "rend l'apprentissage du braille rapide, gratuit et amusant",
+  "madeBy": "Brailliac a été créé par Luke Needham, pour rendre l'apprentissage du Braille plus accessible et agréable.",
+  "support": "Si vous appréciez mon travail, vous pouvez me soutenir via ",
+  "downloadNow": "Télécharger maintenant",
+  "freeDescription": "Gratuit sur tous les appareils Android",
+  "scroll": "Faites défiler pour voir comment..."
+}

locales/fr/keyboardApp.json

@@ -0,0 +1,20 @@
+{
+  "detailPage1": {
+    "title": "Entrée Braille",
+    "description": "Tapez des cellules braille directement dans n'importe quel champ de texte, dans n'importe quelle application"
+  },
+  "détailPage2": {
+    "title": "Traduire automatiquement",
+    "description": "Ou, traduisez automatiquement les symboles au fur et à mesure que vous tapez"
+  },
+  "détailPage3": {
+    "title": "A tout moment",
+    "description": "Peu importe ce que vous tapez, faites-le tout en pratiquant le braille"
+  },
+  "detailPage4": {
+    "title": "Personnaliser",
+    "description": "Choisissez la taille de clavier parfaite pour s'adapter à votre écran"
+  },
+  "name": "Brailliac: clavier braille",
+  "description": "Entraînez-vous en braille en tapant!"
+}

locales/fr/tutorApp.json

@@ -0,0 +1,24 @@
+{
+  "name": "Brailliac: Tuteur Braille",
+  "description": "Tout ce dont vous avez besoin pour apprendre le braille !",
+  "detailPage1": {
+    "title": "Dictionnaire",
+    "description": "Recherchez des symboles rapidement et facilement, parmi différents codes braille"
+  },
+  "détailPage2": {
+    "title": "Pratiquer",
+    "description": "Choisissez exactement quoi forer ou laissez l'application déterminer vos points faibles"
+  },
+  "détailPage3": {
+    "title": "Défi",
+    "description": "Concourir dans les traductions contre la montre"
+  },
+  "detailPage4": {
+    "title": "Traduction",
+    "description": "Traduire de vraies phrases vers et depuis le braille"
+  },
+  "detailPage5": {
+    "title": "Niveau supérieur",
+    "description": "Gagnez des points tout en apprenant à débloquer de nouvelles fonctionnalités et de nouveaux thèmes"
+  }
+}

locales/nl/home.json

@@ -0,0 +1,8 @@
+{
+  "title": "maakt het leren van braille snel, gratis en leuk",
+  "madeBy": "Brailliac is gemaakt door Luke Needham, om het leren van braille toegankelijker en leuker te maken.",
+  "support": "Als je mijn werk leuk vindt, kun je me steunen via ",
+  "downloadNow": "Download nu",
+  "freeDescription": "Gratis op alle Android-apparaten",
+  "scroll": "Scroll om te zien hoe..."
+}

locales/nl/keyboardApp.json

@@ -0,0 +1,20 @@
+{
+  "detailPage1": {
+    "title": "Braille-invoer",
+    "description": "Typ braillecellen rechtstreeks in elk tekstveld, in elke app"
+  },
+  "detailPage2": {
+    "title": "Automatisch vertalen",
+    "description": "Of vertaal symbolen automatisch terwijl u typt"
+  },
+  "detailPage3": {
+    "title": "Op elk moment",
+    "description": "Wat je ook typt, doe het terwijl je braille oefent"
+  },
+  "detailPage4": {
+    "title": "Aanpassen",
+    "description": "Kies de perfecte toetsenbordgrootte die op uw scherm past"
+  },
+  "name": "Brailliac: Braille Keyboard",
+  "description": "Oefen braille terwijl u typt!"
+}

locales/nl/tutorApp.json

@@ -0,0 +1,24 @@
+{
+  "name": "Brailliac: Braille Tutor",
+  "description": "Alles wat je nodig hebt om braille te leren!",
+  "detailPage1": {
+    "title": "Woordenboek",
+    "description": "Snel en eenvoudig symbolen opzoeken in verschillende braillecodes"
+  },
+  "detailPage2": {
+    "title": "Oefenen",
+    "description": "Kies precies wat u wilt boren, of laat de app uw zwakke punten uitzoeken"
+  },
+  "detailPage3": {
+    "title": "Uitdaging",
+    "description": "Concurreren in vertalingen tegen de klok"
+  },
+  "detailPage4": {
+    "title": "Vertaling",
+    "description": "Vertaal echte zinnen zowel van als naar braille"
+  },
+  "detailPage5": {
+    "title": "Niveau omhoog",
+    "description": "Verdien punten terwijl je leert om nieuwe functies en thema's te ontgrendelen"
+  }
+}

next.config.js

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
+
+const nextTranslate = require('next-translate');
+
+const baseConfigs = {
   reactStrictMode: true,
-}
+};
+
+module.exports = nextTranslate(baseConfigs);

package.json

@@ -17,6 +17,7 @@
     "focus-visible": "^5.2.0",
     "framer-motion": "^5.3.1",
     "next": "12.0.4",
+    "next-translate": "^1.6.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "swiper": "^7.3.0"
@@ -26,6 +27,8 @@
     "@types/react": "17.0.35",
     "eslint": "7",
     "eslint-config-next": "12.0.4",
+    "gts": "^3.1.1",
+    "prettier": "^2.8.1",
     "typescript": "4.5.2"
   }
 }

src/domain/content/appitem/getAppItems.ts

@@ -1,8 +1,7 @@
-import {getBrailleTutorAppItem} from "./getBrailleTutorAppItem";
-import {getBrailleKeyboardAppItem} from "./getBrailleKeyboardAppItem";
+import {getBrailleTutorAppItem} from './getBrailleTutorAppItem';
+import {getBrailleKeyboardAppItem} from './getBrailleKeyboardAppItem';
+import {Translate} from 'next-translate';
 
-const allItems = [getBrailleTutorAppItem(), getBrailleKeyboardAppItem()]
-
-export function getAppItems() {
-    return allItems
+export function getAppItems(t: Translate) {
+  return [getBrailleTutorAppItem(t), getBrailleKeyboardAppItem(t)];
 }

src/domain/content/appitem/getBrailleKeyboardAppItem.ts

@@ -1,40 +1,44 @@
-import {AppItem} from "../../model/AppItem";
-import {AppItemDetailPage} from "../../model/AppItemDetailPage";
+import {AppItemDetailPage} from '../../model/AppItemDetailPage';
+import {Translate} from 'next-translate';
 
-const detailPage1: AppItemDetailPage = {
-    title: 'Braille Input',
-    description: 'Type Braille cells directly into any text field, in any app',
-    imageSrc: 'image/detail_page_braille_keyboard_1.png',
-}
+const detailPage1 = (t: Translate): AppItemDetailPage => ({
+  title: t('keyboardApp:detailPage1.title'),
+  description: t('keyboardApp:detailPage1.description'),
+  imageSrc: 'image/detail_page_braille_keyboard_1.png',
+});
 
-const detailPage2: AppItemDetailPage = {
-    title: 'Auto-translate',
-    description: 'Or, automatically translate symbols as you type',
-    imageSrc: 'image/detail_page_braille_keyboard_2.png',
-}
+const detailPage2 = (t: Translate): AppItemDetailPage => ({
+  title: t('keyboardApp:detailPage2.title'),
+  description: t('keyboardApp:detailPage2.description'),
+  imageSrc: 'image/detail_page_braille_keyboard_2.png',
+});
 
-const detailPage3: AppItemDetailPage = {
-    title: 'At any time',
-    description: 'No matter what you’re typing, do it while practising Braille',
-    imageSrc: 'image/detail_page_braille_keyboard_3.png',
-}
+const detailPage3 = (t: Translate): AppItemDetailPage => ({
+  title: t('keyboardApp:detailPage3.title'),
+  description: t('keyboardApp:detailPage3.description'),
+  imageSrc: 'image/detail_page_braille_keyboard_3.png',
+});
 
-const detailPage4: AppItemDetailPage = {
-    title: 'Customise',
-    description: 'Pick the perfect keyboard size to fit your screen',
-    imageSrc: 'image/detail_page_braille_keyboard_4.png',
-}
+const detailPage4 = (t: Translate): AppItemDetailPage => ({
+  title: t('keyboardApp:detailPage4.title'),
+  description: t('keyboardApp:detailPage4.description'),
+  imageSrc: 'image/detail_page_braille_keyboard_4.png',
+});
 
-const item: AppItem = {
-    name: 'Brailliac: Braille Keyboard',
-    description: 'Practise Braille while typing!',
+export function getBrailleKeyboardAppItem(t: Translate) {
+  return {
+    name: t('keyboardApp:name'),
+    description: t('keyboardApp:description'),
     accentColor: 'logo3',
     // TODO: Use SVG
     logoSrc: 'image/logo_braille_keyboard.webp',
-    detailPages: [detailPage1, detailPage2, detailPage3, detailPage4],
-    playStoreUrl: 'https://play.google.com/store/apps/details?id=com.lukeneedham.braillekeyboard',
-}
-
-export function getBrailleKeyboardAppItem() {
-    return item
+    detailPages: [
+      detailPage1(t),
+      detailPage2(t),
+      detailPage3(t),
+      detailPage4(t),
+    ],
+    playStoreUrl:
+      'https://play.google.com/store/apps/details?id=com.lukeneedham.braillekeyboard',
+  };
 }