Nuxt.js: Tłumaczenie stałych elementów interfejsu
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
W tej sekcji tego kursu zajmiemy się tłumaczeniem danych.
To znaczy najpierw skupimy się na warstwie
naszej aplikacji, która nie pochodzi z API Wikipedii, a następnie w kolejnej
lekcji przetłumaczymy faktycznie treści przychodzące do nas z tego API.
W związku z czym. Jak pracować z tłumaczeniami?
Generalnie nie ma potrzeby wymyślać koła na nowo.
Na pewno jest do tego moduł.
Jest taki skrót w Community Web
developmentu, który nazywa się I 18 i jest to skrót od Internalizacji.
I jest to tak naprawdę mechanizm, który pozwala tłumaczyć treści na różne
języki, w związku z czym my na początku zobaczmy co się dzieje w naszej aplikacji.
Tutaj jest właśnie już moduł do internalizacji, który znalazłem dla NOx.
Jest to też oficjalny moduł, bo znajduje się na podstronie naked org.
Czy jest w związku z czym?
Zobaczmy tylko szybko na naszą aplikację.
Ja zauważyłem, że w międzyczasie jak pracowaliśmy nad dynamicznymi stronami
to niestety niektóre fragmenty naszej aplikacji mogły przestać działać.
Widzę tutaj, że na stronie głównej, która
pierwotnie była stroną on już kurczaku przekazujemy undefined, ponieważ
korzystamy z Müllera, czyli tutaj indeks kropka view
dalej zawiera w sobie całą tę treść, którą możemy w tym momencie usunąć, bo
mamy już dedykowane podstrony, które pobierają artykuły z Wikipedii.
Więc tutaj napiszemy sobie po prostu wielką, które też przetłumaczymy na
kolejnych podstronach i musimy się pozbyć tego middleware.
A ponieważ nie jest tutaj nam potrzebne
to, co przychodzi w tym momencie z API, a przynajmniej nie w tej formie.
Być może, że w kolejnych lekcjach stworzymy osobne middleware, który będzie
pobierał dane tylko specyficzne dla naszej strony domowej.
Natomiast w tym momencie jak to zapiszemy,
nasza strona główna powinna działać rzetelniej.
Oczywiście jest pusta.
Możemy tutaj zrobić z tego H1 albo po prostu wielką.
No i tak, tak oto naprawiliśmy tę
podstronę, która niestety się nam zepsuła w poprzedniej lekcji, w związku z czym
zainstalujemy nasz moduł do internalizacji i przejdziemy do dokumentacji.
I w sekcji Setup jest standardowa instrukcja jak z tego korzystać.
My korzystamy z NPM, a więc ponownie wybieramy zakładkę NPM.
Klikamy tutaj.
To się automatycznie dodało do schowka,
więc uruchamiamy komendę npm, install next i 18.
Poczekam chwilę i w międzyczasie
możemy dodać konfigurację do naszego next config.
To jest tutaj mamy napisane, że jest to
treść, którą powinniśmy dodać aby uruchomić ten moduł.
Jest to po prostu uzupełnienie sekcji modules nazwą tej paczki oraz jakieś
opcje, które będziemy za chwilę uzupełniać.
W związku z czym ja to sobie też tutaj skopiuję.
Przechodzimy zaraz configure jest i uzupełniamy nasze modules.
To już trzeci moduł, z którego korzystamy.
I przesuwamy opcje konfiguracyjne poza to modus.
Tutaj jeszcze przecinek zapisujemy.
I możemy posłużyć się przykładem Basic usage.
Na ten moment, czyli przekopałem cały ten config.
I wklejamy go tutaj do centrali.
Zawsze musimy zastąpić oczywiście, bo tak.
Więc co się dzieje tutaj w tym configu?
Otóż w tym momencie on się na miejscu
wrócił, a na expected oczywiście przecinka zabrakło.
Zapiszmy i budujmy ponownie.
Mam.
Możemy poszerzyć tutaj to okienko
i widzimy, że tutaj w configu jest definiujemy jakie języki chcemy wspierać.
Więc jeśli chcielibyśmy aby nasza strona
była po hiszpańsku to musimy tutaj dać alpha tu tego kraju tzw.
alpha to code config out, czyli w tym przypadku ESC dla Hiszpanii APN dla.
Języka angielskiego czy fr dla języka francuskiego.
Tak naprawdę chaos niekoniecznie musi się
odnosić do Hiszpanii, tylko właśnie do języka hiszpańskiego.
I tutaj definiujemy, jaki chcemy domyślny język, ponieważ jeśli będzie nam brakowało
translacji dla danego słowa, to musimy mieć jakieś formy.
W przeciwnym razie wyświetli się klucz danej translacji.
No i tutaj definiujemy nasze wiadomości.
W tym momencie tak naprawdę jeżeli już to zapiszemy i przejdziemy do naszego index
View, to jesteśmy w stanie wykorzystać tę paczkę tutaj, przy tym wielką.
Czyli jeśli ustawimy sobie w wąsach dolara.
To jest taka funkcja, która jest dostępna na obiekcie View.
Dzięki właśnie tej paczce możemy jej też oczywiście użyć tutaj
na poziomie skryptu poprzez disc kropka dolara.
I jest to funkcja, której przekazujemy
parametr w postaci nazwy klucza, który chcemy wyrenderować.
Odpowiedź języku.
Czy jeśli sobie zobaczymy jaki tutaj był
klucz klucz to tabelką i tutaj wklejamy zapiszemy?
No to zobaczymy, że faktycznie dalej wyświetla nam się tutaj to wielką, pomimo
tego, że w naszym kodzie już bezpośrednio tego ciągu znaków nie ma.
Ale takie transakcje nie są zbyt przydatne, jeżeli faktycznie użytkownik
nie może się nawigować do innej wersji językowej.
W związku z czym zróbmy sobie odnośniki do konkretnej wersji.
Tutaj jak przejedziemy dalej troszkę to zobaczymy, że mamy taką możliwość
wyświetlenia obecnej strony poprzez next linka.
Dostajemy dodatkowe metody pomocnicze,
które pozwolą nam przełączyć obecną stronę do innej wersji językowej.
Czyli path naszej strony tutaj widoczne na pasku adresu pozostanie taki sam.
Zmieni się jedynie język.
Więc możemy sobie to skopiować ponownie.
I po prostu dodać to pod naszą jedynką.
Brakuje tutaj też wersji językowych hiszpańskiej.
Możemy ją tutaj dopisać.
Z jakiegoś powodu nie ma jej w dokumentacji ESP a mol.
I zapiszemy.
Więc w tym momencie jeśli zmienimy naszą
ścieżkę, tutaj się nam powinny wyświetlić 3 linki i faktycznie tak też się stało.
Więc klikając na jeden z tych linków,
powiedzmy na francuski, zmienia się nam tutaj translacja słowa wielką.
Oczywiście jesteśmy tutaj
ograniczeni tylko do tych kluczy, które zdefiniujemy sobie w tym momencie.
Skonfiguruje się.
Ale jeśli będzie nam brakowało jakiejś
translacji, to ona się oczywiście nie wyświetli.
Możemy to przetestować w sumie i usunąć
sobie ten klucz wielką z języka francuskiego.
Zobaczmy co się wydarzy.
Strona powinna się przeładować, a jeśli nie, to po prostu ją odświeżamy.
I faktycznie widzimy, że default
language czy format value przechodzi nam na język angielski.
Jeżeli pozbyli byśmy się też angielskiego, to prawdopodobnie wyświetli nam się
po prostu klucz, czyli wielką, bo akurat klucze też mamy w języku
angielskim, ale widzimy, że jest to wielką pisane z małej litery, w związku z czym
jest to klucz translacji, a nie konkretnie wartość.
Więc przywróćmy sobie te wartości tutaj.
I jak możesz się łatwo domyśleć zarządzanie
tyloma językami, bo tych języków może być oczywiście wiele, zwłaszcza jeżeli
pracujemy z projektem Wikipedii, nie jest dobrze zarządzane z poziomu DAX config.
Jest to dosyć statyczna praca, w związku z czym co można zrobić, żeby
nasza aplikacja działa szybciej i była lepiej zarządzana
to możemy wykorzystać lazy loading dla tranzycji i po prostu mamy tutaj taką
opcje w naszej konfiguracji nexta, że możemy przekazać
konkretny katalog, w którym znajdują się translację oraz pliki, w których
znajdują się klucze i wartości, w związku z czym przeniesiemy sobie to.
Do naszego. Jednak skąd ich rzecz jasna.
Tutaj skupimy co może, może cały obiekt Weźmy.
Kopiujemy to welcome co prawda zniknie, możemy zaraz nadać z pozostałej strony.
I po zapisaniu.
Oczywiście jedna rzecz, która jest
wymagana w tym konkretnym przypadku to to, że te pliki muszą istnieć, w
związku z czym stwórzmy sobie katalog lang.
Ponieważ w tym katalogu moduł będzie nam szukał języków, więc
dodajemy folder lang i wewnątrz niego dodajemy odpowiednio trzy pliki.
PN Czy jest fr.
FR. Tak mi się wydaje, że tak.
To klucz.
Skopiować sobie z miasta bezpośrednio oraz.
I to co trzeba zrobić, to wewnątrz takich
plików możemy wyeksportować funkcje na różne sposoby.
Jeśli zastosujemy translację
z jakiegoś zewnętrznego API, to możemy tutaj wykorzystać Promise, ale w
naszym przypadku wystarczą statyczne pliki, które my przygotujemy.
W związku z czym tutaj wstawię po prostu nasze wielką.
I skopiuje te klucze, które tam mieliśmy.
W naszym next config dzieje się.
Jako punkt odniesienia.
Zapisujemy, przywracamy poprzedni stan, a tutaj aplikacja nam się wywróciła, bo
chyba nie wszędzie jeszcze wypracowaliśmy tę funkcję.
W związku z czym to jest akurat wersja?
Hiszpańska.
Więc wersję hiszpańską zapisaliśmy.
Następnie wersja francuska.
Export default obiekt oraz wersja angielska.
Po prostu jako export default wielką.
W tym momencie tak naprawdę to wszystko ona powinna zacząć działać.
Spróbujmy jeszcze raz uruchomić serwer.
Mam nadzieję, że tym razem się nie wywróci, bo będzie miał wszystkie pliki.
Ale chyba nie zadziałało missing kolumn.
W samym next config dzieje się ok.
Oczywiście zawsze brakuje nam tego średnika.
Ciekawe czy średnika brakuje. Zobaczymy.
Tutaj zaczyna się tablica.
To jest zdrowo.
I tutaj chyba jest jeden za dużo.
Napis kolorowy zapisujemy.
Faktycznie teraz zadziałało i teoretycznie.
Nasza aplikacja w tym momencie też powinna.
Funkcjonować tak, jak funkcjonowała.
Czyli jeśli przejdziemy na stronę główną i zmienimy sobie język na hiszpański.
Na to będą inne wersje
językowe, w związku z czym co możemy zrobić, to przede wszystkim
pobrać wszystkie wartości, które chcemy przetłumaczyć.
Tutaj zróbmy skopiowanie tego tekstu.
Zróbmy sobie jakiś plik pomocniczy.
Pozbędziemy się wszystkich wersji językowych, bo na tym nam nie zależy
i nie jest to najlepszy forma tłumaczenia, ale skupimy się na niej.
W związku z czym otworzymy sobie po prostu
Google Translate i przetłumaczymy sobie to powiedzmy na hiszpański.
Na francuski również oczywiście możemy.
W związku z czym możemy teraz zdefiniować tutaj klucze do tych ciągów znaków.
Wyrównane.
Tutaj się nam coś zaznaczyło, jest wyrównane.
W claim wartości powinniśmy pozbyć się wszelakich spacji z
naszych kluczy, więc to może zająć troszkę czasu, w związku z czym.
Ja to tutaj w takiej formie zostawię.
Być może przywrócę tylko to wielką ona tutaj jest.
Zapiszemy to i w kolejnej lekcji zajmiemy
się faktycznie tłumaczeniem naszego widoku i pojedynczych wersji językowych.
Tzn właśnie tej kolumny.
Tutaj.
Stałych elementów.
Interfejsu użytkownika na dane języki.
I gdy skończymy to robić, przejdziemy do tłumaczenia samego API.
Kod
Zmiany wprowadzone w lekcji · 12 min
diff --git a/26/minipedia/lang/en-US.js b/26/minipedia/lang/en-US.js
new file mode 100644
index 0000000..4ae3881
--- /dev/null
+++ b/26/minipedia/lang/en-US.js
@@ -0,0 +1,32 @@
+export default {
+ welcome: 'Welcome'
+ // 'Main page': 'Main page'
+ // 'Contents': 'Contents'
+ // 'Current events': 'Current events'
+ // 'Random article': 'Random article'
+ // 'About Wikipedia': 'About Wikipedia'
+ // 'Contact us': 'Contact us'
+ // 'Donate': 'Donate'
+ // 'Contribute': 'Contribute'
+ // 'Help': 'Help'
+ // 'Learn to edit': 'Learn to edit'
+ // 'Community portal': 'Community portal'
+ // 'Recent changes': 'Recent changes'
+ // 'Upload file': 'Upload file'
+ // 'Tools': 'Tools'
+ // 'What links here': 'What links here'
+ // 'Related changes': 'Related changes'
+ // 'Special pages': 'Special pages'
+ // 'Permanent link': 'Permanent link'
+ // 'Page information': 'Page information'
+ // 'Cite this page': 'Cite this page'
+ // 'Wikidata item': 'Wikidata item'
+ // 'Print/export': 'Print/export'
+ // 'Download as PDF': 'Download as PDF'
+ // 'Printable version': 'Printable version'
+ // 'In other projects': 'In other projects'
+ // 'Wikimedia Commons': 'Wikimedia Commons'
+ // 'Languages': 'Languages'
+ // 'Register': 'Register'
+ // 'Login': 'Login'
+}
\ No newline at end of file
diff --git a/26/minipedia/lang/es-ES.js b/26/minipedia/lang/es-ES.js
new file mode 100644
index 0000000..c6b5dc1
--- /dev/null
+++ b/26/minipedia/lang/es-ES.js
@@ -0,0 +1,3 @@
+export default {
+ welcome: 'Bienvenido'
+}
\ No newline at end of file
diff --git a/26/minipedia/lang/fr-FR.js b/26/minipedia/lang/fr-FR.js
new file mode 100644
index 0000000..b2eb007
--- /dev/null
+++ b/26/minipedia/lang/fr-FR.js
@@ -0,0 +1,3 @@
+export default {
+ welcome: 'Bienvenue'
+}
\ No newline at end of file
diff --git a/26/minipedia/nuxt.config.js b/26/minipedia/nuxt.config.js
index ff2e9c0..2fbe808 100644
--- a/26/minipedia/nuxt.config.js
+++ b/26/minipedia/nuxt.config.js
@@ -49,8 +49,28 @@ module.exports = {
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
- 'nuxt-basic-auth-module'
+ 'nuxt-basic-auth-module',
+ 'nuxt-i18n',
],
+ i18n: {
+ locales: [
+ {
+ code: 'en',
+ file: 'en-US.js'
+ },
+ {
+ code: 'es',
+ file: 'es-ES.js'
+ },
+ {
+ code: 'fr',
+ file: 'fr-FR.js'
+ }
+ ],
+ lazy: true,
+ langDir: 'lang/',
+ defaultLocale: 'en'
+ },
basic: {
name: process.env.USERNAME,
pass: process.env.PASSWORD,
diff --git a/26/minipedia/package-lock.json b/26/minipedia/package-lock.json
index a1751a8..c3ee6ce 100644
--- a/26/minipedia/package-lock.json
+++ b/26/minipedia/package-lock.json
@@ -1114,6 +1114,29 @@
}
}
},
+ "@intlify/shared": {
+ "version": "9.1.6",
+ "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.6.tgz",
+ "integrity": "sha512-6MtsKulyfZxdD7OuxjaODjj8QWoHCnLFAk4wkWiHqBCa6UCTC0qXjtEeZ1MxpQihvFmmJZauBUu25EvtngW5qQ=="
+ },
+ "@intlify/vue-i18n-extensions": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-extensions/-/vue-i18n-extensions-1.0.2.tgz",
+ "integrity": "sha512-rnfA0ScyBXyp9xsSD4EAMGeOh1yv/AE7fhqdAdSOr5X8N39azz257umfRtzNT9sHXAKSSzpCVhIbMAkp5c/gjQ==",
+ "requires": {
+ "@babel/parser": "^7.9.6"
+ }
+ },
+ "@intlify/vue-i18n-loader": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.1.0.tgz",
+ "integrity": "sha512-9LXiztMtYKTE8t/hRwwGUp+ofrwU0sxLQLzFEOZ38zvn0DonUIQmZUj1cfz5p1Lu8BllxKbCrn6HnsRJ+LYA6g==",
+ "requires": {
+ "@intlify/shared": "^9.0.0",
+ "js-yaml": "^3.13.1",
+ "json5": "^2.1.1"
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -6934,6 +6957,11 @@
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.9.1.tgz",
"integrity": "sha512-AhYrAxJ/IW2257nHkJasUjtxHhmYIUEHEjsofJtGYsPWk8pTjqjbPFlJfOwfY+WX8YBiKHM1l0ViDC/mye2SWg=="
},
+ "js-cookie": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+ "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6997,6 +7025,11 @@
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
},
+ "klona": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+ "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
+ },
"last-call-webpack-plugin": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
@@ -7138,6 +7171,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
+ "lodash.merge": {
+ "version": "4.6.2",
+ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+ },
"lodash.template": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -7804,6 +7842,36 @@
"consola": "^2.3.2"
}
},
+ "nuxt-i18n": {
+ "version": "6.27.0",
+ "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.27.0.tgz",
+ "integrity": "sha512-QOZ7ePML3/HyC6NgUSsNb/dItnySwYIRike1koWgSqwM3RK7RQBJD9egcc/IIqsYPuA7rIivb/csXjipiBZQjA==",
+ "requires": {
+ "@babel/parser": "^7.14.1",
+ "@babel/traverse": "^7.14.0",
+ "@intlify/vue-i18n-extensions": "^1.0.2",
+ "@intlify/vue-i18n-loader": "^1.1.0",
+ "cookie": "^0.4.1",
+ "devalue": "^2.0.1",
+ "js-cookie": "^2.2.1",
+ "klona": "^2.0.4",
+ "lodash.merge": "^4.6.2",
+ "ufo": "^0.7.2",
+ "vue-i18n": "^8.24.4"
+ },
+ "dependencies": {
+ "cookie": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+ "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+ },
+ "ufo": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.7.2.tgz",
+ "integrity": "sha512-cfxpkL4g79LrCXa1RyvhM/obxunKRjHApD4Ml4UG0CZcKvfodfKH0YTmnm6ofKKUnLzBMdfXSZzlgyQmj6b3sw=="
+ }
+ }
+ },
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -11353,6 +11421,11 @@
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
},
+ "vue-i18n": {
+ "version": "8.24.4",
+ "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.4.tgz",
+ "integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
+ },
"vue-loader": {
"version": "15.9.6",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
diff --git a/26/minipedia/package.json b/26/minipedia/package.json
index 811dfae..6b8cca7 100644
--- a/26/minipedia/package.json
+++ b/26/minipedia/package.json
@@ -20,6 +20,7 @@
"lodash": "^4.17.21",
"nuxt": "^2.15.3",
"nuxt-basic-auth-module": "^1.4.0",
+ "nuxt-i18n": "^6.27.0",
"v-tooltip": "^2.1.3"
},
"devDependencies": {
diff --git a/26/minipedia/pages/index.vue b/26/minipedia/pages/index.vue
index 061cc3c..94e8d64 100644
--- a/26/minipedia/pages/index.vue
+++ b/26/minipedia/pages/index.vue
@@ -1,177 +1,17 @@
<template>
<article class="content">
- <h1>
- Janusz Korczak
- </h1>
-
- <span class="notice">From Wikipedia, the free encyclopedia</span>
+ <h1>Minipedia - {{ $t('welcome') }} </h1>
- <FullInfoBox :content="$store.state.fullInfo.general" />
-
- <p>{{ $store.state.summary }} </p>
-
- <TableOfContents :content="$store.state.content" />
-
- <ContentSection
- v-for="section in $store.state.content"
- :title="section.title"
- :content="section.content"
- :key="section.title"
- />
-
- <h2 id="references">References</h2>
- <ol class="references">
- <li>
- Yad Vashem (2010). "Ceremony Marking 68 Years Since its Murder of Korczak and the Children of
- the Orphanage". Yad Vashem The Holocaust Martyrs' and Heroes' Remembrance Authority. Retrieved
- 27 January 2012.
- </li>
- <li>
- "Jewish Doctor Janusz Korczak Died With 190 Children at Treblinka Court: Changes Date of Death
- for Orphanage Director". JTA. 30 March 2015. Retrieved 30 March 2015.
- </li>
- <li>
- Sandra Joseph, Institute of Education in London (July–August 2002). "POLE APART - the life and
- work of Janusz Korczak". Young Minds Magazine 59. Archived from the original on 28 September
- 2007. Retrieved 27 January 2012.
- </li>
- <li>
- "Polskie Stowarzyszenie im. Janusza Korczaka". www.pskorczak.org.pl (in Polish). Retrieved
- 2016-03-12.
- </li>
- <li>
- Tadeusz Lewowicki (2000). "Janusz Korczak (1878–1942)" (PDF, 43 KB). Prospects:the quarterly
- review of comparative education, vol. XXIV, no. 1/2, 1994, p. 37–48. UNESCO: International
- Bureau of Education. Retrieved 27 January 2012.
- </li>
- <li>
- Prof. Barbara Smolińska–Theiss (2012). "Janusz Korczak – zarys portretu (the portrait)" (in
- Polish). Rok Janusza Korczaka (The official year of Janusz Korczak). Archived from the original
- on 15 April 2012. Retrieved 27 January 2012.
- </li>
- <li>
- The Month, Volume 39. Simpki, Marshall, and Company. 1968. p. 350. When Dr. Janusz Korczak, a
- Jewish philanthropist and agnostic, voluntarily chooses to follow the Jewish orphans under his
- care to the Nazi extermination camp in Treblinka...
- </li>
- <li>
- Chris Mullen (March 7, 1983). "Korczak's Children: Flawed Faces in a Warsaw Ghetto". The
- Heights. p. 24. Retrieved 25 August 2013. An assimilated Jew, he changed his name from Henryk
- Goldschmidt and was an agnostic who did not believe in forcing religion on children.
- </li>
- <li>
- Janusz Korczak (1978). Ghetto diary. Holocaust Library. p. 42. You know I am an agnostic, but I
- understood: Pedagogy, tolerance, and all that.
- </li>
- <li>
- Janusz Korczak; Aleksander Lewin (1996). Sława: Opowiadania (1898-1914) (in Polish). Oficyna
- Wydawnicza Latona. p. 387. ISBN 978-83-85449-35-5.
- </li>
- <li>
- Maria Falkowska (1978). Kalendarium życia, działalności i twórczości Janusza Korczaka (in
- Polish). Wydaw-a Szkolne i Pedagogiczne. p. 8.
- </li>
- <li>
- Joanna Cieśla (15 January 2012). "Henryk zwany Januszem. Janusz Korczak - pedagog
- rewolucjonista" (in Polish). S.P. Polityka. Historia. Retrieved 27 January 2012.
- </li>
- <li>
- Józef Ignacy Kraszewski (2012). "Moja Biblioteczka". Historia o Janaszu Korczaku i o pięknej
- Miecznikównie. LubimyCzytać.pl. Retrieved May 25, 2012.
- </li>
- <li>
- Hanna Mortkowicz-Olczakowa (1960). "Goldszmit Henryk", in Polski Słownik Biograficzny, T. VIII.
- P. 214
- </li>
- <li>
- "CENTOS". Jewish Historical Institute. Retrieved 2020-07-20.
- </li>
- <li>
- Dorit Gani (April 10, 2018). "Who Stood with the Orphans When the Nazis Came?". The National
- Library of Israel. Retrieved 26 November 2019.
- </li>
- <li>
- Agnieszka Litwiniuk (March 29, 2012). "Stefania Wilczyńska". Sylwetki warszawskich Żydówek
- (Profiles of Warsaw Jewish women) (in Polish). Warszefroj, Centrum Kultury Jidysz (Yidish
- Centre). Retrieved 14 December 2013.
- </li>
- <li>
- "Dom Sierot. Krochmalna 92". Swedish Holocaust Memorial Association. Retrieved 27 January 2012.
- </li>
- <li>
- "Perle, Joshua". Encyclopaedia Judaica. Encyclopedia.com. Retrieved June 15, 2019.
- </li>
- <li>
- Nick Shepley (7 December 2015). Hitler, Stalin and the Destruction of Poland: Explaining
- History. Andrews UK Limited. p. 55. ISBN 978-1-78333-143-7.
- </li>
- <li>
- Jerzy Waldorff, Władysław Szpilman, The Pianist. Page 96.
- </li>
- <li>
- Mary Berg, The Diary of Mary Berg: Growing Up in the Warsaw Ghetto, Oxford: Oneworld
- Publications, 1996, pages 169-170.
- </li>
- <li>
- "The Jewish Cemetery on Okopowa Street in Warsaw (Cmentarz żydowski przy ul. Okopowej w
- Warszawie)". Cmentarium. 2007. Retrieved January 8, 2013.
- </li>
- <li>
- Mirosław Gorzelanny (November 27, 2012). "School history". Specjalny Ośrodek Szkolno –
- Wychowawczy im Janusza Korczaka w Borzęciczkach. Archived from the original on June 26, 2013.
- Retrieved January 8, 2013.
- </li>
- <li>
- "Wyrok w sprawie Korczaka – omówienie". Fundacja Nowoczesna Polska. Retrieved 2016-03-12.
- </li>
- <li>
- "Wygrany spór o datę śmierci Korczaka. Prawda pokonała "własność intelektualną"". Dziennik
- Internautów. Retrieved 2016-03-12.
- </li>
- <li>
- "Author: Janusz Korczak". Wolne Lektury. Retrieved 2016-03-12.
- </li>
- <li>
- "Janusz Korczak", Book Institute
- </li>
- <li>
- Modig, Cecilia (2009). Never Violence – Thirty Years on from Sweden's Abolition of Corporal
- Punishment (PDF). Ministry of Health and Social Affairs, Sweden; Save the Children Sweden.
- Reference No. S2009.030. p. 8.
- </li>
- <li>
- Agata Anna Lisiak (2010). Urban Cultures in (post)colonial Central Europe. Purdue University
- Press. pp. 147–. ISBN 978-1-55753-573-3.
- </li>
- <li>
- "Monument to Janusz Korczak (Warsaw)". monuments-remembrance.eu. Retrieved 2020-04-09.
- </li>
- <li>
- Rin, Svi (April 1966). "גדולי חינוך בעמנו Book Review". Jewish Social Studies. 28: 127-128.
- </li>
- <li>
- Hickling, Alfred (June 12, 2008). "?". The Guardian. London.
- </li>
- <li>
- "Chlodnagaden nr. 33 - Dit Holbæk". Dit Holbæk (in Danish). 2017-03-14. Retrieved 2017-04-09.
- </li>
- <li>
- Knapp, Bettina (1995). French Theater Since 1968. New York: Twayne Publishers. ISBN 0805782974.
- </li>
- <li>
- "Korczak (2011) | British Youth Music Theatre".
- </li>
-
- </ol>
-
+ <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
+ <nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>
+ <nuxt-link :to="switchLocalePath('es')">Español</nuxt-link>
</article>
</div>
</template>
<script>
export default {
- layout: 'default',
- middleware: ['wiki-routing'],
+ layout: 'default'
}
</script>