🌐 Adds translations for widget text

src/assets/locales/en.json

@@ -250,11 +250,23 @@
     "general": {
       "loading": "Loading...",
       "show-more": "Expand Details",
-      "show-less": "Show Less"
+      "show-less": "Show Less",
+      "open-link": "Continue Reading"
+    },
+    "pi-hole": {
+      "status-heading": "Status"
+    },
+    "stat-ping": {
+      "up": "Online",
+      "down": "Offline"
+    },
+    "system-info": {
+      "uptime": "Uptime"
+    },
+    "flight-data": {
+      "arrivals": "Arrivals",
+      "departures": "Departures"
     },
-    "clock": {},
-    "weather": {},
-    "weather-forecast": {},
     "tfl-status": {
       "good-service-all": "Good Service on all Lines",
       "good-service-rest": "Good Service on all other Lines"

src/components/Widgets/Apod.vue

@@ -9,7 +9,7 @@
   <p class="copyright">{{ copyright }}</p>
   <p class="description">{{ truncatedDescription }}</p>
   <p @click="toggleShowFull" class="expend-details-btn">
-    {{ showFullDesc ? 'Show Less' : ' Expand Details' }}
+    {{ showFullDesc ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
   </p>
 </div>
 </template>

src/components/Widgets/CveVulnerabilities.vue

@@ -15,7 +15,7 @@
     <p class="description">
       {{ cve.description | formatDescription }}
       <a v-if="cve.description.length > 350" class="read-more" :href="cve.url" target="_blank">
-        Keep Reading
+        {{ $t('widgets.general.open-link') }}
       </a>
     </p>
   </div>

src/components/Widgets/Flights.vue

@@ -7,7 +7,7 @@
   <!-- Departures -->
   <div v-if="departures.length > 0" class="flight-group">
     <h3 class="flight-type-subtitle" v-if="direction === 'both'">
-      Departures
+      {{ $t('widgets.flight-data.departures') }}
     </h3>
     <div v-for="flight in departures" :key="flight.number" class="flight" v-tooltip="tip(flight)">
       <p class="info flight-time">{{ flight.time | formatDate }}</p>
@@ -18,7 +18,7 @@
   <!-- Arrivals -->
   <div v-if="arrivals.length > 0" class="flight-group">
     <h3 class="flight-type-subtitle" v-if="direction === 'both'">
-      Arrivals
+      {{ $t('widgets.flight-data.arrivals') }}
     </h3>
     <div v-for="flight in arrivals" :key="flight.number" class="flight" v-tooltip="tip(flight)">
       <p class="info flight-time">{{ flight.time | formatDate }}</p>

src/components/Widgets/PiHoleStats.vue

@@ -2,7 +2,7 @@
 <div class="pi-hole-stats-wrapper">
   <!-- Current Status -->
   <div v-if="status" class="status">
-    <span class="status-lbl">Status:</span>
+    <span class="status-lbl">{{ $t('widgets.pi-hole.status-heading') }}:</span>
     <span :class="`status-val ${getStatusColor(status)}`">{{ status | capitalize }}</span>
   </div>
   <!-- Block Pie Chart -->

src/components/Widgets/RssFeed.vue

@@ -21,7 +21,9 @@
         </div>
       </a>
       <div class="post-body" v-html="post.description"></div>
-      <a class="continue-reading-btn" :href="post.link">Continue Reading</a>
+      <a class="continue-reading-btn" :href="post.link">
+        {{ $t('widgets.general.open-link') }}
+      </a>
     </div>
   </div>
   <!-- End Feed Content -->

src/components/Widgets/StatPing.vue

@@ -9,8 +9,12 @@
     <!-- Title -->
     <p class="service-name">
       {{ service.name }}:
-      <span v-if="service.online" class="status-online">Online</span>
+      <span v-if="service.online" class="status-online">
-      <span v-else class="status-offline">Offline</span>
+        {{ $t('widgets.stat-ping.up') }}
+      </span>
+      <span v-else class="status-offline">
+        {{ $t('widgets.stat-ping.down') }}
+      </span>
     </p>
     <!-- Charts -->
     <div class="charts">

src/components/Widgets/SystemInfo.vue

@@ -5,7 +5,8 @@
       {{ info.username | isUsername }}{{ info.hostname }}
     </p>
     <p class="system">
-      {{ info.system }} <span class="gap">|</span> Uptime: {{ info.uptime | makeUptime }}
+      {{ info.system }} <span class="gap">|</span>
+      {{ $t('widgets.system-info.uptime') }}: {{ info.uptime | makeUptime }}
     </p>
   </div>
   <div class="some-charts">

src/components/Widgets/Weather.vue

@@ -17,7 +17,7 @@
   </div>
   <!-- Show/ hide toggle button -->
   <p class="more-details-btn" @click="toggleDetails" v-if="weatherDetails.length > 0">
-    {{ showDetails ? 'Show Less' : ' Expand Details' }}
+    {{ showDetails ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
   </p>
 </div>
 </template>

src/components/Widgets/WeatherForecast.vue

@@ -25,7 +25,7 @@
     </div>
   </div>
   <p class="more-details-btn" @click="toggleDetails" v-if="showDetails">
-    Show Less
+    {{ $t('widgets.general.show-less') }}
   </p>
 </div>
 </template>