From e70a45161247371728e1ee24a1537683bab9be23 Mon Sep 17 00:00:00 2001 From: Dexter Griffiths Date: Fri, 15 Apr 2022 02:48:28 +0900 Subject: [PATCH 1/7] added basic i18n frame and locale changer to navigation bar --- pinry-spa/package.json | 1 + pinry-spa/src/assets/locales/en.json | 3 +++ pinry-spa/src/components/LoginForm.vue | 2 +- pinry-spa/src/components/PHeader.vue | 6 ++++++ pinry-spa/src/main.js | 13 +++++++++++++ pinry-spa/yarn.lock | 5 +++++ 6 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 pinry-spa/src/assets/locales/en.json diff --git a/pinry-spa/package.json b/pinry-spa/package.json index ba5f39e..75348ab 100644 --- a/pinry-spa/package.json +++ b/pinry-spa/package.json @@ -13,6 +13,7 @@ "core-js": "^3.3.2", "register-service-worker": "^1.6.2", "vue": "^2.6.10", + "vue-i18n": "8", "vue-masonry": "^0.11.8", "vue-router": "^3.1.3" }, diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/assets/locales/en.json new file mode 100644 index 0000000..0865dee --- /dev/null +++ b/pinry-spa/src/assets/locales/en.json @@ -0,0 +1,3 @@ +{ + "loginTitle": "Login" +} \ No newline at end of file diff --git a/pinry-spa/src/components/LoginForm.vue b/pinry-spa/src/components/LoginForm.vue index da82ec1..f46dea4 100644 --- a/pinry-spa/src/components/LoginForm.vue +++ b/pinry-spa/src/components/LoginForm.vue @@ -3,7 +3,7 @@
-

Login

+

{{ $t("loginTitle") }}

+
+ +
@@ -129,6 +134,7 @@ export default { loggedIn: false, meta: {}, }, + langs: ['en'], }; }, computed: { diff --git a/pinry-spa/src/main.js b/pinry-spa/src/main.js index 9496e58..a50a0a9 100644 --- a/pinry-spa/src/main.js +++ b/pinry-spa/src/main.js @@ -1,17 +1,30 @@ import Buefy from 'buefy'; import Vue from 'vue'; import { VueMasonryPlugin } from 'vue-masonry'; +import VueI18n from 'vue-i18n'; import App from './App.vue'; import router from './router'; import setUpAxiosCsrfConfig from './components/utils/csrf'; import './registerServiceWorker'; +import en from './assets/locales/en.json'; + +const messages = { + en, +}; Vue.config.productionTip = false; Vue.use(Buefy); Vue.use(VueMasonryPlugin); +Vue.use(VueI18n); setUpAxiosCsrfConfig(); +const i18n = new VueI18n({ + locale: 'en', + messages, +}); + new Vue({ router, + i18n, render: h => h(App), }).$mount('#app'); diff --git a/pinry-spa/yarn.lock b/pinry-spa/yarn.lock index 99f0082..aaf9c68 100644 --- a/pinry-spa/yarn.lock +++ b/pinry-spa/yarn.lock @@ -7160,6 +7160,11 @@ vue-hot-reload-api@^2.3.0: version "2.3.4" resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1568190386192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" +vue-i18n@8: + version "8.27.1" + resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f" + integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ== + vue-loader@^15.7.2: version "15.8.3" resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c" From e7095129b7790502220524b466bd32426eb0b6c4 Mon Sep 17 00:00:00 2001 From: Dexter Griffiths Date: Sat, 16 Apr 2022 18:32:31 +0900 Subject: [PATCH 2/7] added default english translations to all html semantic and div enclosed tag content --- pinry-spa/src/assets/locales/en.json | 59 +++++++++++++++++++++- pinry-spa/src/components/BoardEdit.vue | 10 ++-- pinry-spa/src/components/Boards.vue | 2 +- pinry-spa/src/components/LoginForm.vue | 4 +- pinry-spa/src/components/PHeader.vue | 34 +++++-------- pinry-spa/src/components/PinPreview.vue | 8 +-- pinry-spa/src/components/Pins.vue | 4 +- pinry-spa/src/components/SignUpForm.vue | 6 +-- pinry-spa/src/components/UserProfileCard.vue | 8 +-- pinry-spa/src/components/noMore.vue | 2 +- pinry-spa/src/components/pin_edit/Add2Board.vue | 6 +-- pinry-spa/src/components/pin_edit/FileUpload.vue | 2 +- pinry-spa/src/components/pin_edit/FilterSelect.vue | 2 +- .../src/components/pin_edit/PinCreateModal.vue | 10 ++-- pinry-spa/src/components/search/SearchPanel.vue | 8 +-- pinry-spa/src/components/user/profile.vue | 6 +-- pinry-spa/src/views/PageNotFound.vue | 4 +- 17 files changed, 113 insertions(+), 62 deletions(-) diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/assets/locales/en.json index 0865dee..f1cfc58 100644 --- a/pinry-spa/src/assets/locales/en.json +++ b/pinry-spa/src/assets/locales/en.json @@ -1,3 +1,60 @@ { - "loginTitle": "Login" + "loginTitle": "Login", + "loginButton": "Login", + "closeButton": "Close", + "end": "End", + "bookmarkletLink": "BookmarkletLink", + "createLink": "Create", + "pinLink": "Pin", + "boardLink": "Board", + "myLink": "My", + "boardsLink": "Boards", + "pinsLink": "Pins", + "profileLink": "Profile", + "browserExtensionsLink": "Browser Extensions", + "chromeLink": "Chrome", + "firefoxLink": "Firefox", + "signUpLink": "Sign up", + "logInLink": "Log in", + "logOutLink": "Log out", + "signUpTitle": "Sign Up", + "registerButton": "Register", + "pageNotFound": "Oops! Page Not Found", + "error404": "Error 404", + "pinsInBoard": "Pins in board: ", + "isPrivateCheckbox": "is private", + "createBoardButton": "Create Board", + "saveChangesButton": "Save Changes", + "pinnedByTitle": "Pinned by ", + "sourceButton": "Source", + "originalImageButton": "Original Image", + "permalinkButton": "Permalink", + "pinnedByInfo": "Pinned by", + "sourceLink": "Source", + "userProfileCardContent": "Yet another Pinry user.", + "pinsUserProfileCardLink": "Pins", + "boardsUserProfileCardLink": "Boards", + "profileUserProfileCardLink": "Profile", + "tokenUserProfileCardTitle": "Token", + "tokenUserProfileCardContent": "Your Token is:", + "pleaseReadTokenUserProfileCardContent": "Please read ", + "forMoreDetailsParagraph": " for more detail to know how to use it.", + "drfApiDocumentationLink": "DRF API Documentation", + "searchButton": "Search", + "noResultsFound": "No results found", + "SearchPanelBoardOption": "Board", + "SearchPanelTagOption": "Tag", + "Add2BoardModalCardTitle": "Add Pin to Board", + "Add2BoardModalCardButton": "Add Pin to Board", + "FileUploadDescription": "Drop your files here or click to upload", + "filterSelectCreateNewBoardButton": "Create New Board", + "pinCreateModalEmptySlot": "There are no items", + "pinCreateModalCreatePinButton": "Create Pin", + "pinCreateModalSaveChangesButton": "Save Changes", + "": "", + "": "", + "": "", + "": "", + "": "", + "": "" } \ No newline at end of file diff --git a/pinry-spa/src/components/BoardEdit.vue b/pinry-spa/src/components/BoardEdit.vue index 572b608..77cbb3c 100644 --- a/pinry-spa/src/components/BoardEdit.vue +++ b/pinry-spa/src/components/BoardEdit.vue @@ -22,7 +22,7 @@ :type="createModel.form.private.type" :message="createModel.form.private.error"> - is private + {{ $t("isPrivateCheckbox") }} @@ -42,22 +42,22 @@ :type="editModel.form.private.type" :message="editModel.form.private.error"> - is private + {{ $t("isPrivateCheckbox") }}
- +
diff --git a/pinry-spa/src/components/Boards.vue b/pinry-spa/src/components/Boards.vue index 0fbc397..1daa97e 100644 --- a/pinry-spa/src/components/Boards.vue +++ b/pinry-spa/src/components/Boards.vue @@ -38,7 +38,7 @@

{{ item.name }}

- Pins in board: {{ item.total_pins }} + {{ $t("pinsInBoard") }}{{ item.total_pins }}

diff --git a/pinry-spa/src/components/LoginForm.vue b/pinry-spa/src/components/LoginForm.vue index f46dea4..af67180 100644 --- a/pinry-spa/src/components/LoginForm.vue +++ b/pinry-spa/src/components/LoginForm.vue @@ -32,10 +32,10 @@
- + + class="button is-primary">{{ $t("loginButton") }}
diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue index d798562..a84dc79 100644 --- a/pinry-spa/src/components/PHeader.vue +++ b/pinry-spa/src/components/PHeader.vue @@ -18,24 +18,24 @@ -
- -
@@ -134,7 +129,6 @@ export default { loggedIn: false, meta: {}, }, - langs: ['en'], }; }, computed: { diff --git a/pinry-spa/src/components/PinPreview.vue b/pinry-spa/src/components/PinPreview.vue index fa572cf..ed2aff1 100644 --- a/pinry-spa/src/components/PinPreview.vue +++ b/pinry-spa/src/components/PinPreview.vue @@ -19,7 +19,7 @@
-

Pinned by {{ pinItem.author }}

+

{{ $t("pinnedByTitle") }}{{ pinItem.author }}

in  - • Source + • {{ $t("sourceLink") }}

diff --git a/pinry-spa/src/components/SignUpForm.vue b/pinry-spa/src/components/SignUpForm.vue index ebd1d87..cebf48f 100644 --- a/pinry-spa/src/components/SignUpForm.vue +++ b/pinry-spa/src/components/SignUpForm.vue @@ -3,7 +3,7 @@
-

Sign Up

+

{{ $t("signUpTitle") }}

- + + class="button is-primary">{{ $t("registerButton") }}
diff --git a/pinry-spa/src/components/UserProfileCard.vue b/pinry-spa/src/components/UserProfileCard.vue index dd514ec..59c2cb6 100644 --- a/pinry-spa/src/components/UserProfileCard.vue +++ b/pinry-spa/src/components/UserProfileCard.vue @@ -21,7 +21,7 @@
- Yet another Pinry user. + {{ $t("userProfileCardContent") }}
@@ -34,7 +34,7 @@ icon="image" custom-size="mdi-24px"> - Pins + {{ $t("pinsUserProfileCardLink") }}
  • @@ -44,7 +44,7 @@ icon="folder-multiple-image" custom-size="mdi-24px"> - Boards + {{ $t("boardsUserProfileCardLink") }}
  • @@ -54,7 +54,7 @@ icon="account" custom-size="mdi-24px"> - Profile + {{ $t("profileUserProfileCardLink") }}
    • diff --git a/pinry-spa/src/components/noMore.vue b/pinry-spa/src/components/noMore.vue index d02463d..a75c7ad 100644 --- a/pinry-spa/src/components/noMore.vue +++ b/pinry-spa/src/components/noMore.vue @@ -1,6 +1,6 @@ diff --git a/pinry-spa/src/components/pin_edit/Add2Board.vue b/pinry-spa/src/components/pin_edit/Add2Board.vue index 66eeaf3..0d33136 100644 --- a/pinry-spa/src/components/pin_edit/Add2Board.vue +++ b/pinry-spa/src/components/pin_edit/Add2Board.vue @@ -3,7 +3,7 @@
    -

    Add Pin to Board

    +

    {{ $t("Add2BoardModalCardTitle") }}

    @@ -21,10 +21,10 @@
    - +
    diff --git a/pinry-spa/src/components/pin_edit/FileUpload.vue b/pinry-spa/src/components/pin_edit/FileUpload.vue index 4fdb68d..54c6409 100644 --- a/pinry-spa/src/components/pin_edit/FileUpload.vue +++ b/pinry-spa/src/components/pin_edit/FileUpload.vue @@ -19,7 +19,7 @@ size="is-medium">

    -

    Drop your files here or click to upload

    +

    {{ $t("FileUploadDescription") }}

    diff --git a/pinry-spa/src/components/pin_edit/FilterSelect.vue b/pinry-spa/src/components/pin_edit/FilterSelect.vue index 5f647eb..988977c 100644 --- a/pinry-spa/src/components/pin_edit/FilterSelect.vue +++ b/pinry-spa/src/components/pin_edit/FilterSelect.vue @@ -15,7 +15,7 @@ diff --git a/pinry-spa/src/components/pin_edit/PinCreateModal.vue b/pinry-spa/src/components/pin_edit/PinCreateModal.vue index 4444eac..84cf336 100644 --- a/pinry-spa/src/components/pin_edit/PinCreateModal.vue +++ b/pinry-spa/src/components/pin_edit/PinCreateModal.vue @@ -32,7 +32,7 @@ :type="pinModel.form.private.type" :message="pinModel.form.private.error"> - is private + {{ $t("isPrivateCheckbox") }} {{ props.option }} @@ -85,16 +85,16 @@
    - +
    diff --git a/pinry-spa/src/components/search/SearchPanel.vue b/pinry-spa/src/components/search/SearchPanel.vue index 485a3f9..66b66db 100644 --- a/pinry-spa/src/components/search/SearchPanel.vue +++ b/pinry-spa/src/components/search/SearchPanel.vue @@ -4,8 +4,8 @@
    - - + + - + diff --git a/pinry-spa/src/components/user/profile.vue b/pinry-spa/src/components/user/profile.vue index fefdec8..5625a86 100644 --- a/pinry-spa/src/components/user/profile.vue +++ b/pinry-spa/src/components/user/profile.vue @@ -3,14 +3,14 @@

    - Token + {{ $t("tokenUserProfileCardTitle") }}

    -

    Your Token is:

    +

    {{ $t("tokenUserProfileCardContent") }}

    {{ token }}
    - Please read DRF API Documentation for more detail to know how to use it. + {{ $t("pleaseReadTokenUserProfileCardContent") }}{{ $t("drfApiDocumentationLink") }}{{ $t("forMoreDetailsParagraph") }}
    diff --git a/pinry-spa/src/views/PageNotFound.vue b/pinry-spa/src/views/PageNotFound.vue index a5bf70b..13ccb13 100644 --- a/pinry-spa/src/views/PageNotFound.vue +++ b/pinry-spa/src/views/PageNotFound.vue @@ -3,8 +3,8 @@
    -

    Oops! Page Not Found

    -

    Error 404

    +

    {{ $t("pageNotFound") }}

    +

    {{ $t("error404") }}

    From 9d0db337eb8adeb345869e8d146752cd6ab8cb60 Mon Sep 17 00:00:00 2001 From: Dexter Griffiths Date: Sat, 16 Apr 2022 21:35:37 +0900 Subject: [PATCH 3/7] adding local changer back in and cleaning the en.json file --- pinry-spa/src/assets/locales/en.json | 8 +------- pinry-spa/src/components/PHeader.vue | 6 ++++++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/assets/locales/en.json index f1cfc58..596c936 100644 --- a/pinry-spa/src/assets/locales/en.json +++ b/pinry-spa/src/assets/locales/en.json @@ -50,11 +50,5 @@ "filterSelectCreateNewBoardButton": "Create New Board", "pinCreateModalEmptySlot": "There are no items", "pinCreateModalCreatePinButton": "Create Pin", - "pinCreateModalSaveChangesButton": "Save Changes", - "": "", - "": "", - "": "", - "": "", - "": "", - "": "" + "pinCreateModalSaveChangesButton": "Save Changes" } \ No newline at end of file diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue index a84dc79..c463380 100644 --- a/pinry-spa/src/components/PHeader.vue +++ b/pinry-spa/src/components/PHeader.vue @@ -109,6 +109,11 @@
    +
    + +
    @@ -129,6 +134,7 @@ export default { loggedIn: false, meta: {}, }, + langs: ['en'], }; }, computed: { From f0cfb27d9b3e25f833c22bfa7a106432d5ef7253 Mon Sep 17 00:00:00 2001 From: Dexter Griffiths Date: Sat, 16 Apr 2022 22:17:43 +0900 Subject: [PATCH 4/7] added v-bind to all placeholders to show vue-i18n translations --- pinry-spa/src/assets/locales/en.json | 16 +++++++++++++++- pinry-spa/src/components/BoardEdit.vue | 4 ++-- pinry-spa/src/components/LoginForm.vue | 4 ++-- pinry-spa/src/components/SignUpForm.vue | 8 ++++---- pinry-spa/src/components/pin_edit/FilterSelect.vue | 2 +- pinry-spa/src/components/pin_edit/PinCreateModal.vue | 8 ++++---- pinry-spa/src/components/search/SearchPanel.vue | 6 +++--- 7 files changed, 31 insertions(+), 17 deletions(-) diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/assets/locales/en.json index 596c936..48510a8 100644 --- a/pinry-spa/src/assets/locales/en.json +++ b/pinry-spa/src/assets/locales/en.json @@ -50,5 +50,19 @@ "filterSelectCreateNewBoardButton": "Create New Board", "pinCreateModalEmptySlot": "There are no items", "pinCreateModalCreatePinButton": "Create Pin", - "pinCreateModalSaveChangesButton": "Save Changes" + "pinCreateModalSaveChangesButton": "Save Changes", + "passwordSignUpPlaceholder": "Your password", + "passwordLoginPlaceholder": "Your password", + "boardNamePlaceholder": "board name", + "usernamePlaceholder": "Your Username", + "emailPlaceholder": "Your email", + "repeatPasswordInputPlaceholder": "Your password again", + "chooseFilterPlaceholder": "Choose Filter", + "selectFilterPlaceholder": "select a filter then type to filter", + "searchBoardPlaceholder": "type to search board", + "filterSelectSelectBoardPlaceholder": "Type to filter or Create one", + "pinCreateModalImageURLPlaceholder": "where to fetch the image", + "pinCreateModalImageSourcePlaceholder": "where to find the pin", + "pinCreateModalImageTagsPlaceholder": "Add a tag", + "pinCreateModalImageDescriptionPlaceholder": "idea from this pin" } \ No newline at end of file diff --git a/pinry-spa/src/components/BoardEdit.vue b/pinry-spa/src/components/BoardEdit.vue index 77cbb3c..fed8b7e 100644 --- a/pinry-spa/src/components/BoardEdit.vue +++ b/pinry-spa/src/components/BoardEdit.vue @@ -13,7 +13,7 @@ @@ -33,7 +33,7 @@ diff --git a/pinry-spa/src/components/LoginForm.vue b/pinry-spa/src/components/LoginForm.vue index af67180..1fbafc1 100644 --- a/pinry-spa/src/components/LoginForm.vue +++ b/pinry-spa/src/components/LoginForm.vue @@ -13,7 +13,7 @@ name="username" type="text" v-model="form.username.value" - placeholder="Your Username" + v-bind:placeholder="$t('usernamePlaceholder')" maxlength="30" required> @@ -26,7 +26,7 @@ type="password" v-model="form.password.value" password-reveal - placeholder="Your password" + v-bind:placeholder="$t('passwordLoginPlaceholder')" required> diff --git a/pinry-spa/src/components/SignUpForm.vue b/pinry-spa/src/components/SignUpForm.vue index cebf48f..d7aec7b 100644 --- a/pinry-spa/src/components/SignUpForm.vue +++ b/pinry-spa/src/components/SignUpForm.vue @@ -12,7 +12,7 @@ @@ -25,7 +25,7 @@ type="email" v-model="form.email.value" password-reveal - placeholder="Your email" + v-bind:placeholder="$t('emailPlaceholder')" required> @@ -36,7 +36,7 @@ type="password" v-model="form.password.value" password-reveal - placeholder="Your password" + v-bind:placeholder="$t('passwordSignUpPlaceholder')" required> @@ -47,7 +47,7 @@ type="password" v-model="form.password_repeat.value" password-reveal - placeholder="Your password again" + v-bind:placeholder="$t('repeatPasswordInputPlaceholder')" required> diff --git a/pinry-spa/src/components/pin_edit/FilterSelect.vue b/pinry-spa/src/components/pin_edit/FilterSelect.vue index 988977c..677c696 100644 --- a/pinry-spa/src/components/pin_edit/FilterSelect.vue +++ b/pinry-spa/src/components/pin_edit/FilterSelect.vue @@ -6,7 +6,7 @@ diff --git a/pinry-spa/src/components/pin_edit/PinCreateModal.vue b/pinry-spa/src/components/pin_edit/PinCreateModal.vue index 84cf336..00cb54a 100644 --- a/pinry-spa/src/components/pin_edit/PinCreateModal.vue +++ b/pinry-spa/src/components/pin_edit/PinCreateModal.vue @@ -23,7 +23,7 @@ @@ -41,7 +41,7 @@ @@ -54,7 +54,7 @@ ellipsis icon="label" :allow-new="true" - placeholder="Add a tag" + v-bind:placeholder="$t('pinCreateModalImageTagsPlaceholder')" @typing="getFilteredTags">