Merge pull request #5868 from eufelipemateus/transalte-profile

[Translation] translate  profile

resources/assets/components/partials/profile/ProfileFeed.vue

@@ -8,7 +8,7 @@
 						:class="[ tabIndex === 1 ? 'active' : '' ]"
 						@click="toggleTab(1)"
 						>
-						Posts
+						{{ $t("profile.posts")}}
 					</button>
 					<!-- <button
 						class="btn btn-link"
@@ -22,7 +22,7 @@
 						class="btn btn-link"
 						:class="[ tabIndex === 'archives' ? 'active' : '' ]"
 						@click="toggleTab('archives')">
-						Archives
+						{{ $t("profile.archives")}}
 					</button>
 
 					<button
@@ -30,7 +30,7 @@
 						class="btn btn-link"
 						:class="[ tabIndex === 'bookmarks' ? 'active' : '' ]"
 						@click="toggleTab('bookmarks')">
-						Bookmarks
+						{{ $t("profile.bookmarks")}}
 					</button>
 
 					<button
@@ -38,7 +38,7 @@
 						class="btn btn-link"
 						:class="[ tabIndex === 2 ? 'active' : '' ]"
 						@click="toggleTab(2)">
-						Collections
+						{{ $t("profile.collections")}}
 					</button>
 
 					<button
@@ -46,7 +46,7 @@
 						class="btn btn-link"
 						:class="[ tabIndex === 3 ? 'active' : '' ]"
 						@click="toggleTab(3)">
-						Likes
+						{{ $t("profile.likes")}}
 					</button>
 				</div>
 			</div>
@@ -299,7 +299,7 @@
 		<div v-else-if="tabIndex === 'private'" class="row justify-content-center">
 			<div class="col-12 col-md-8 text-center">
 				<img src="/img/illustrations/dk-secure-feed.svg" class="img-fluid" style="opacity: 0.6;">
-				<p class="h3 text-dark font-weight-bold mt-3 py-3">This profile is private</p>
+				<p class="h3 text-dark font-weight-bold mt-3 py-3">{{ $t("profile.private")}}</p>
 				<div class="lead text-muted px-3">
 					Only approved followers can see <span class="font-weight-bold text-dark text-break">&commat;{{ profile.acct }}</span>'s <br />
 					posts. To request access, click <span class="font-weight-bold">Follow</span>.
@@ -317,14 +317,14 @@
 						<div class="media">
 							<img :src="collection.thumb" width="65" height="65" style="object-fit: cover;" class="rounded-lg border mr-3" onerror="this.onerror=null;this.src='/storage/no-preview.png';">
 							<div class="media-body text-left">
-								<p class="lead mb-0">{{ collection.title ? collection.title : 'Untitled' }}</p>
+								<p class="lead mb-0">{{ collection.title ? collection.title : $t("profile.untitled") }}</p>
-								<p class="small text-muted mb-1">{{ collection.description || 'No description available' }}</p>
+								<p class="small text-muted mb-1">{{ collection.description || $t("profile.noDescription") }}</p>
 								<p class="small text-lighter mb-0 font-weight-bold">
-									<span>{{ collection.post_count }} posts</span>
+									<span>{{ collection.post_count }} {{ $t("profile.posts")}}</span>
 									<span>&middot;</span>
-									<span v-if="collection.visibility === 'public'" class="text-dark">Public</span>
+									<span v-if="collection.visibility === 'public'" class="text-dark">{{ $t("profile.public")}}</span>
 									<span v-else-if="collection.visibility === 'private'" class="text-dark"><i class="far fa-lock fa-sm"></i> Followers Only</span>
-									<span v-else-if="collection.visibility === 'draft'" class="primary"><i class="far fa-lock fa-sm"></i> Draft</span>
+									<span v-else-if="collection.visibility === 'draft'" class="primary"><i class="far fa-lock fa-sm"></i> {{ $t("profile.draft")}}</span>
 									<span>&middot;</span>
 									<span v-if="collection.published_at">Created {{ timeago(collection.published_at) }} ago</span>
 									<span v-else class="text-warning">UNPUBLISHED</span>
@@ -377,7 +377,7 @@
 			<div v-if="!favourites || !favourites.length" class="row justify-content-center">
 				<div class="col-12 col-md-8 text-center">
 					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
-					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have liked</p>
+					<p class="lead text-muted font-weight-bold">{{ $t("profile.emptyLikes")}}</p>
 				</div>
 			</div>
 		</div>
@@ -409,7 +409,7 @@
 			<div v-if="!bookmarks || !bookmarks.length" class="row justify-content-center">
 				<div class="col-12 col-md-8 text-center">
 					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
-					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have bookmarked</p>
+					<p class="lead text-muted font-weight-bold">{{ $t("profile.emptyBookmarks")}}</p>
 				</div>
 			</div>
 		</div>
@@ -438,7 +438,7 @@
 			<div v-if="!archives || !archives.length" class="row justify-content-center">
 				<div class="col-12 col-md-8 text-center">
 					<img src="/img/illustrations/dk-nature-man-monochrome.svg" class="img-fluid" style="opacity: 0.6;">
-					<p class="lead text-muted font-weight-bold">We can't seem to find any posts you have archived</p>
+					<p class="lead text-muted font-weight-bold">{{ $t("profile.emptyArchives") }}</p>
 				</div>
 			</div>
 		</div>

resources/assets/components/partials/profile/ProfileSidebar.vue

@@ -105,9 +105,9 @@
 				</p>
 
 				<p v-if="user.id != profile.id && (relationship.followed_by || relationship.muting || relationship.blocking)" class="mt-n3 text-center">
-					<span v-if="relationship.followed_by" class="badge badge-primary p-1">Follows you</span>
+					<span v-if="relationship.followed_by" class="badge badge-primary p-1">{{ $t("profile.followYou")}}</span>
-					<span v-if="relationship.muting" class="badge badge-dark p-1 ml-1">Muted</span>
+					<span v-if="relationship.muting" class="badge badge-dark p-1 ml-1">{{ $t("profile.muted")}}</span>
-					<span v-if="relationship.blocking" class="badge badge-danger p-1 ml-1">Blocked</span>
+					<span v-if="relationship.blocking" class="badge badge-danger p-1 ml-1">{{ $t("profile.blocked") }}</span>
 				</p>
 			</div>
 
@@ -145,7 +145,7 @@
 					</router-link> -->
                     <a class="btn btn-light font-weight-bold btn-block follow-btn" href="/settings/home">{{ $t('profile.editProfile') }}</a>
 					<a v-if="!profile.locked" class="btn btn-light font-weight-bold btn-block follow-btn mt-md-n4" href="/i/web/my-portfolio">
-                        My Portfolio
+                       {{ $t("profile.myPortifolio") }}
                         <span class="badge badge-success ml-1">NEW</span>
                     </a>
 				</div>
@@ -421,10 +421,10 @@
 			},
 
 			getJoinedDate() {
-				let d = new Date(this.profile.created_at);
+				return new Date(this.profile.created_at).toLocaleDateString(this.$i18n.locale, {
-				let month = new Intl.DateTimeFormat("en-US", { month: "long" }).format(d);
+                    year: 'numeric',
-				let year = d.getFullYear();
+                    month: 'long',
-				return `${month} ${year}`;
+                });
 			},
 
 			follow() {

resources/assets/js/app.js

@@ -1,3 +1,5 @@
+import VueI18n from 'vue-i18n';
+
 require('./polyfill');
 window._ = require('lodash');
 window.Popper = require('popper.js').default;
@@ -19,7 +21,7 @@ if (token) {
 window.App = window.App || {};
 
 window.App.redirect = function() {
-	document.querySelectorAll('a').forEach(function(i,k) { 
+	document.querySelectorAll('a').forEach(function(i,k) {
 		let a = i.getAttribute('href');
 		if(a && a.length > 5 && a.startsWith('https://')) {
 			let url = new URL(a);
@@ -31,7 +33,23 @@ window.App.redirect = function() {
 }
 
 window.App.boot = function() {
-	new Vue({ el: '#content'});
+    Vue.use(VueI18n);
+
+    let i18nMessages = {
+        en: require('./i18n/en.json'),
+        pt: require('./i18n/pt.json'),
+    };
+    let locale = document.querySelector('html').getAttribute('lang');
+
+    const i18n = new VueI18n({
+    locale: locale, // set locale
+    fallbackLocale: 'en',
+    messages: i18nMessages
+});
+    new Vue({
+        el: '#content',
+        i18n,
+    });
 }
 
 window.addEventListener("load", () => {
@@ -67,8 +85,8 @@ window.App.util = {
 			console.log('Unsupported method.');
 		}),
 	},
-	time: (function() { 
+	time: (function() {
-		return new Date; 
+		return new Date;
 	}),
 	version: 1,
 	format: {
@@ -78,40 +96,36 @@ window.App.util = {
 			}
 			return new Intl.NumberFormat(locale, { notation: notation , compactDisplay: "short" }).format(count);
 		}),
-        timeAgo: function(ts) {
+		timeAgo: (function(ts) {
-            const date = new Date(ts);
+            let date = new Date(ts);
-            const now = new Date();
+            let now = new Date();
-
+            let seconds = Math.floor((now - date) / 1000);
-            const seconds = Math.floor((now - date) / 1000);
+            let interval = Math.floor(seconds / 31536000);
-
-            const secondsInYear = 60 * 60 * 24 * 365.25;
-            let interval = Math.floor(seconds / secondsInYear);
             if (interval >= 1) {
-                return interval + "y";
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'year');
             }
-
+            interval = Math.floor(seconds / 2592000);
-            interval = Math.floor(seconds / (60 * 60 * 24 * 7));
             if (interval >= 1) {
-                return interval + "w";
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'month');
             }
-
+            interval = Math.floor(seconds / 604800);
-            interval = Math.floor(seconds / (60 * 60 * 24));
             if (interval >= 1) {
-                return interval + "d";
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'week');
             }
-
+            interval = Math.floor(seconds / 86400);
-            interval = Math.floor(seconds / (60 * 60));
             if (interval >= 1) {
-                return interval + "h";
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'day');
+            }
+            interval = Math.floor(seconds / 3600);
+            if (interval >= 1) {
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'hour');
             }
-
             interval = Math.floor(seconds / 60);
             if (interval >= 1) {
-                return interval + "m";
+                return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-interval, 'minute');
             }
-
+            return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-seconds, 'second');
-            return Math.floor(seconds) + "s";
+		}),
-        },
 		timeAhead: (function(ts, short = true) {
 			let date = Date.parse(ts);
 			let diff = date - Date.parse(new Date());
@@ -154,9 +168,9 @@ window.App.util = {
 				tag = '/i/redirect?url=' + encodeURIComponent(tag);
 			}
 
-			return tag; 
+			return tag;
 		})
-	}, 
+	},
 	filters: [
 			['1984','filter-1977'],
 			['Azen','filter-aden'],

resources/assets/js/components/Profile.vue

@@ -16,7 +16,7 @@
 	</div>
 	<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
 		<div class="container">
-			<p class="text-center font-weight-bold">You are blocking this account</p>
+			<p class="text-center font-weight-bold">{{ $t("profile.blocking")}}</p>
 			<p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
 		</div>
 	</div>
@@ -49,7 +49,7 @@
 														<div class="font-weight-light">
 															<span class="text-dark text-center">
 																<p class="font-weight-bold mb-0">{{formatCount(profile.statuses_count)}}</p>
-																<p class="text-muted mb-0 small">Posts</p>
+																<p class="text-muted mb-0 small">{{ $t("profile.posts")}}</p>
 															</span>
 														</div>
 													</li>
@@ -57,7 +57,7 @@
 														<div v-if="profileSettings.followers.count" class="font-weight-light">
 															<a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
 																<p class="font-weight-bold mb-0">{{formatCount(profile.followers_count)}}</p>
-																<p class="text-muted mb-0 small">Followers</p>
+																<p class="text-muted mb-0 small">{{ $t("profile.followers")}}</p>
 															</a>
 														</div>
 													</li>
@@ -65,7 +65,7 @@
 														<div v-if="profileSettings.following.count" class="font-weight-light">
 															<a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
 																<p class="font-weight-bold mb-0">{{formatCount(profile.following_count)}}</p>
-																<p class="text-muted mb-0 small">Following</p>
+																<p class="text-muted mb-0 small">{{ $t("profile.following")}}</p>
 															</a>
 														</div>
 													</li>
@@ -86,7 +86,7 @@
 									<p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-3">
 										<button type="button" @click="showSponsorModal" class="btn btn-outline-secondary font-weight-bold py-0">
 											<i class="fas fa-heart text-danger"></i>
-											Donate
+											{{ $t("profile.sponsor")}}
 										</button>
 									</p>
 								</div>
@@ -106,7 +106,7 @@
 										</span>
 									</span>
 									<span class="pl-4" v-if="owner && user.hasOwnProperty('id')">
-										<a class="btn btn-outline-secondary btn-sm" href="/settings/home" style="font-weight: 600;">Edit Profile</a>
+										<a class="btn btn-outline-secondary btn-sm" href="/settings/home" style="font-weight: 600;">{{ $t("profile.editProfile") }}</a>
 									</span>
 									<span class="pl-4">
 										<a class="fas fa-ellipsis-h fa-lg text-dark text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
@@ -117,19 +117,19 @@
 										<div class="font-weight-light pr-5">
 											<span class="text-dark">
 												<span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
-												Posts
+												{{ $t("profile.posts")}}
 											</span>
 										</div>
 										<div v-if="profileSettings.followers.count" class="font-weight-light pr-5">
 											<a class="text-dark cursor-pointer" v-on:click="followersModal()">
 												<span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
-												Followers
+												{{ $t("profile.followers")}}
 											</a>
 										</div>
 										<div v-if="profileSettings.following.count" class="font-weight-light">
 											<a class="text-dark cursor-pointer" v-on:click="followingModal()">
 												<span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
-												Following
+												{{ $t("profile.following")}}
 											</a>
 										</div>
 									</div>
@@ -141,11 +141,11 @@
 									<p v-if="profile.website"><a :href="profile.website" class="profile-website small" rel="me external nofollow noopener" target="_blank">{{formatWebsite(profile.website)}}</a></p>
 									<p class="d-flex small text-muted align-items-center">
 										<span v-if="profile.is_admin" class="btn btn-outline-danger btn-sm py-0 mr-3" title="Admin Account" data-toggle="tooltip">
-											Admin
+											{{ $t("profile.admin") }}
 										</span>
-										<span v-if="relationship && relationship.followed_by" class="btn btn-outline-muted btn-sm py-0 mr-3">Follows You</span>
+										<span v-if="relationship && relationship.followed_by" class="btn btn-outline-muted btn-sm py-0 mr-3">{{ $t("profile.followYou") }}</span>
 										<span>
-											Joined {{joinedAtFormat(profile.created_at)}}
+											{{$t("profile.joined")}} {{joinedAtFormat(profile.created_at)}}
 										</span>
 									</p>
 								</div>
@@ -156,7 +156,7 @@
 			</div>
 			<div v-if="user && user.hasOwnProperty('id')" class="d-block d-md-none my-0 pt-3 border-bottom">
 				<p class="pt-3">
-					<button v-if="owner" class="btn btn-outline-secondary bg-white btn-sm py-1 btn-block text-center font-weight-bold text-dark border border-lighter" @click.prevent="redirect('/settings/home')">Edit Profile</button>
+					<button v-if="owner" class="btn btn-outline-secondary bg-white btn-sm py-1 btn-block text-center font-weight-bold text-dark border border-lighter" @click.prevent="redirect('/settings/home')">{{ $t("profile.editProfile")}}</button>
 					<button v-if="!owner && relationship.following" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter" @click="followProfile">&nbsp;&nbsp; Unfollow &nbsp;&nbsp;</button>
 					<button v-if="!owner && !relationship.following" class="btn btn-primary btn-sm py-1 px-5 font-weight-bold" @click="followProfile">{{relationship.followed_by ? 'Follow Back' : '&nbsp;&nbsp;&nbsp;&nbsp; Follow &nbsp;&nbsp;&nbsp;&nbsp;'}}</button>
 					<!-- <button v-if="!owner" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter mx-2">Message</button>
@@ -1340,9 +1340,11 @@
 				return this.truncate(site, 60);
 			},
 
-			joinedAtFormat(created) {
+            joinedAtFormat(created) {
-				let d = new Date(created);
+                return new Date(created).toLocaleDateString(this.$i18n.locale, {
-				return d.toDateString();
+                    year: 'numeric',
+                    month: 'long',
+                });
 			},
 
 			archivesInfiniteLoader($state) {

resources/lang/en/web.php

@@ -127,6 +127,24 @@ return [
 
 		'emptyCollections' => 'We can\'t seem to find any collections',
 		'emptyPosts' => 'We can\'t seem to find any posts',
+
+        'blocking' => 'You are blocking this account',
+        'sponsor' => 'Donate',
+        'followYou' => 'Follows You',
+        'archives' => 'Archives',
+        'bookmarks' => 'Bookmarks',
+        'likes' => 'Likes',
+        'muted' => 'Muted',
+        'blocked' => 'Blocked',
+        'myPortifolio' => 'My Portfolio',
+        'private' => 'This profile is private',
+        'public' => 'Public',
+        'draft' => 'Draft',
+        'emptyLikes' => 'We can\'t seem to find any posts you have liked',
+        'emptyBookmarks' => 'We can\'t seem to find any posts you have bookmarked',
+        'emptyArchives' => 'We can\'t seem to find any archived posts',
+        'untitled' => 'Untitled',
+        'noDescription' => 'No description available'
 	],
 
 	'menu' => [

resources/lang/pt/web.php

@@ -127,6 +127,24 @@ return [
 
 		'emptyCollections' => 'Não conseguimos encontrar nenhuma coleção',
 		'emptyPosts' => 'Não conseguimos encontrar nenhuma publicação',
+
+        'blocking' => 'Você está bloqueando esta conta',
+        'sponsor' => 'Doar',
+        'followYou' => 'Segue você',
+        'archives' => 'Arquivados',
+        'bookmarks' => 'Favoritos',
+        'likes' => 'Curtidas',
+        'muted' => 'Silenciado',
+        'blocked' => 'Bloqueado',
+        'myPortifolio' => 'Meu Portfólio',
+        'private' => 'Este perfil é privado',
+        'public' => 'Público',
+        'draft' => 'Rascunho',
+        'emptyLikes' => 'Não conseguimos encontrar nenhuma publicação que você tenha curtido',
+        'emptyBookmarks' => 'Não conseguimos encontrar nenhuma publicação nos seus favoritos',
+        'emptyArchives' => 'Não conseguimos encontrar nenhuma publicação arquivada',
+        'untitled' => 'Sem título',
+        'noDescription' => 'Nenhuma descrição disponível'
 	],
 
 	'menu' => [