chore(i18n): improve some of the punctuation related issues (#6724)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/components/CertificateInfo.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <h4>{{ $t("Certificate Info") }}</h4>
-        {{ $t("Certificate Chain") }}:
+        {{ $t("Certificate Chain:") }}
         <div v-if="valid" class="rounded d-inline-flex ms-2 text-white tag-valid">
             {{ $t("Valid") }}
         </div>

src/components/DockerHostDialog.vue

@@ -40,14 +40,13 @@
                                 required
                             />
 
-                            <div class="form-text">
-                                {{ $t("Examples") }}:
+                            <i18n-t tag="div" keypath="Examples:" class="form-text">
                                 <ul>
-                                    <li>/var/run/docker.sock</li>
-                                    <li>http://localhost:2375</li>
-                                    <li>https://localhost:2376 (TLS)</li>
+                                    <li><code>/var/run/docker.sock</code></li>
+                                    <li><code>http://localhost:2375</code></li>
+                                    <li><code>https://localhost:2376 (TLS)</code></li>
                                 </ul>
-                            </div>
+                            </i18n-t>
                         </div>
                     </div>
 

src/components/RemoteBrowserDialog.vue

@@ -31,12 +31,9 @@
                                 required
                             />
 
-                            <div class="form-text mt-3">
-                                {{ $t("Examples") }}:
-                                <ul>
-                                    <li>ws://chrome.browserless.io/playwright?token=YOUR-API-TOKEN</li>
-                                </ul>
-                            </div>
+                            <i18n-t tag="div" keypath="Example:" class="form-text mt-3">
+                                <code>ws://chrome.browserless.io/playwright?token=YOUR-API-TOKEN</code>
+                            </i18n-t>
                         </div>
                     </div>
 

src/components/notifications/Octopush.vue

@@ -2,8 +2,8 @@
     <div class="mb-3">
         <label for="octopush-version" class="form-label">{{ $t("Octopush API Version") }}</label>
         <select id="octopush-version" v-model="$parent.notification.octopushVersion" class="form-select">
-            <option value="2">{{ "octopush" }} ({{ $t("endpoint") }}: api.octopush.com)</option>
-            <option value="1">{{ $t("Legacy Octopush-DM") }} ({{ $t("endpoint") }}: www.octopush-dm.com)</option>
+            <option value="2">{{ $t("octopushEndpoint", { url: "api.octopush.com" }) }}</option>
+            <option value="1">{{ $t("legacyOctopushEndpoint", { url: "www.octopush-dm.com" }) }}</option>
         </select>
         <div class="form-text">
             {{ $t("octopushLegacyHint") }}

src/components/settings/APIKeys.vue

@@ -27,7 +27,7 @@
                             <div class="status">
                                 {{ $t("apiKey-" + item.status) }}
                             </div>
-                            <div class="date">{{ $t("Created") }}: {{ item.createdDate }}</div>
+                            <div class="date">{{ $t("createdAt", { date: item.createdDate }) }}</div>
                             <div class="date">
                                 {{ $t("Expires") }}:
                                 {{ item.expires || $t("Never") }}

src/components/settings/About.vue

@@ -3,8 +3,8 @@
         <div class="logo d-flex flex-column justify-content-center align-items-center">
             <object class="my-4" width="200" height="200" data="/icon.svg" />
             <div class="fs-4 fw-bold">Uptime Kuma</div>
-            <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
-            <div class="frontend-version">{{ $t("Frontend Version") }}: {{ $root.frontendVersion }}</div>
+            <div>{{ $t("versionIs", { version: $root.info.version }) }}</div>
+            <div class="frontend-version">{{ $t("frontendVersionIs", { version: $root.frontendVersion }) }}</div>
 
             <div v-if="!$root.isFrontendBackendVersionMatched" class="alert alert-warning mt-4" role="alert">
                 ⚠️ {{ $t("Frontend Version do not match backend version!") }}

src/components/settings/Security.vue

@@ -4,15 +4,13 @@
             <!-- Change Password -->
             <template v-if="!settings.disableAuth">
                 <p>
-                    {{ $t("Current User") }}:
-                    <strong>{{ $root.username }}</strong>
                     <button
                         v-if="!settings.disableAuth"
                         id="logout-btn"
                         class="btn btn-danger ms-4 me-2 mb-2"
                         @click="$root.logout"
                     >
-                        {{ $t("Logout") }}
+                        {{ $t("logoutCurrentUser", { username: $root.username }) }}
                     </button>
                 </p>
 

src/lang/en.json

@@ -20,7 +20,7 @@
     "General": "General",
     "Game": "Game",
     "Primary Base URL": "Primary Base URL",
-    "Version": "Version",
+    "versionIs": "Version: {version}",
     "Check Update On GitHub": "Check Update On GitHub",
     "List": "List",
     "Home": "Home",
@@ -143,6 +143,7 @@
     "where you intend to implement third-party authentication": "where you intend to implement third-party authentication",
     "Please use this option carefully!": "Please use this option carefully!",
     "Logout": "Log out",
+    "logoutCurrentUser": "Log out {username}",
     "Leave": "Leave",
     "I understand, please disable": "I understand, please disable",
     "Confirm": "Confirm",
@@ -278,7 +279,6 @@
     "records": "records",
     "One record": "One record",
     "steamApiKeyDescriptionAt": "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key at {url}",
-    "Current User": "Current User",
     "topic": "Topic",
     "topicExplanation": "MQTT topic to monitor",
     "mqttWebSocketPath": "MQTT WebSocket Path",
@@ -318,8 +318,9 @@
     "dark": "dark",
     "Post": "Post",
     "Please input title and content": "Please input title and content",
-    "Created": "Created",
-    "Last Updated": "Last Updated",
+    "createdAt": "Created: {date}",
+    "lastUpdatedAt": "Last Updated: {date}",
+    "lastUpdatedAtFromNow": "Last Updated: {date} ({fromNow})",
     "Switch to Light Theme": "Switch to Light Theme",
     "Switch to Dark Theme": "Switch to Dark Theme",
     "Show Tags": "Show Tags",
@@ -354,7 +355,7 @@
     "proxyDescription": "Proxies must be assigned to a monitor to function.",
     "enableProxyDescription": "This proxy will not effect on monitor requests until it is activated. You can control temporarily disable the proxy from all monitors by activation status.",
     "setAsDefaultProxyDescription": "This proxy will be enabled by default for new monitors. You can still disable the proxy separately for each monitor.",
-    "Certificate Chain": "Certificate Chain",
+    "Certificate Chain:": "Certificate Chain:",
     "Valid": "Valid",
     "Invalid": "Invalid",
     "User": "User",
@@ -401,7 +402,7 @@
     "Add a new expiry notification day": "Add a new expiry notification day",
     "Remove the expiry notification": "Remove the expiry notification day",
     "Proxy": "Proxy",
-    "Date Created": "Date Created",
+    "dateCreatedAtFromNow": "Date Created: {date} ({fromNow})",
     "Footer Text": "Footer Text",
     "RSS Title": "RSS Title",
     "Leave blank to use status page title": "Leave blank to use status page title",
@@ -475,13 +476,13 @@
     "disableCloudflaredNoAuthMsg": "You are in No Auth mode, a password is not required.",
     "trustProxyDescription": "Trust 'X-Forwarded-*' headers. If you want to get the correct client IP and your Uptime Kuma is behind a proxy such as Nginx or Apache, you should enable this.",
     "wayToGetLineNotifyToken": "You can get an access token from {0}",
-    "Examples": "Examples",
+    "Examples:": "Examples: {0}",
     "supportBaleChatID": "Support Direct Chat / Group / Channel's Chat ID",
     "wayToGetBaleChatID": "You can get your chat ID by sending a message to the bot and going to this URL to view the chat_id:",
     "wayToGetBaleToken": "You can get a token from {0}.",
     "Home Assistant URL": "Home Assistant URL",
     "Long-Lived Access Token": "Long-Lived Access Token",
-    "Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token. ": "Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token. ",
+    "Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token. ": "Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token.",
     "Notification Service": "Notification Service",
     "default: notify all devices": "default: notify all devices",
     "A list of Notification Services can be found in Home Assistant under \"Developer Tools > Services\" search for \"notification\" to find your device/phone name.": "A list of Notification Services can be found in Home Assistant under \"Developer Tools > Services\" search for \"notification\" to find your device/phone name.",
@@ -490,7 +491,7 @@
     "Event type:": "Event type:",
     "Event data:": "Event data:",
     "Then choose an action, for example switch the scene to where an RGB light is red.": "Then choose an action, for example switch the scene to where an RGB light is red.",
-    "Frontend Version": "Frontend Version",
+    "frontendVersionIs": "Frontend Version: {version}",
     "Frontend Version do not match backend version!": "Frontend Version do not match backend version!",
     "backupOutdatedWarning": "Deprecated: Since a lot of features were added and this backup feature is a bit unmaintained, it cannot generate or restore a complete backup.",
     "backupRecommend": "Please backup the volume or the data folder (./data/) directly instead.",
@@ -501,7 +502,7 @@
     "startDateTime": "Start Date/Time",
     "endDateTime": "End Date/Time",
     "cronExpression": "Cron Expression",
-    "cronSchedule": "Schedule: ",
+    "cronScheduleDescription": "Schedule: {description}",
     "Duration (Minutes)": "Duration (Minutes)",
     "invalidCronExpression": "Invalid Cron Expression: {0}",
     "recurringInterval": "Interval",
@@ -678,7 +679,6 @@
     "backupDescription": "You can backup all monitors and notifications into a JSON file.",
     "backupDescription2": "Note: history and event data is not included.",
     "backupDescription3": "Sensitive data such as notification tokens are included in the export file; please store export securely.",
-    "endpoint": "endpoint",
     "octopushAPIKey": "\"API key\" from HTTP API credentials in control panel",
     "octopushLogin": "\"Login\" from HTTP API credentials in control panel",
     "promosmsLogin": "API Login Name",
@@ -730,7 +730,7 @@
     "apiCredentials": "API credentials",
     "octopushLegacyHint": "Do you use the legacy version of Octopush (2011-2020) or the new version?",
     "Check octopush prices": "Check octopush prices {0}.",
-    "octopushPhoneNumber": "Phone number (intl format, eg : +33612345678) ",
+    "octopushPhoneNumber": "Phone number (intl format, eg : +33612345678)",
     "octopushSMSSender": "SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)",
     "LunaSea Device ID": "LunaSea Device ID",
     "Apprise URL": "Apprise URL",
@@ -880,7 +880,8 @@
     "From Name/Number": "From Name/Number",
     "Leave blank to use a shared sender number.": "Leave blank to use a shared sender number.",
     "Octopush API Version": "Octopush API Version",
-    "Legacy Octopush-DM": "Legacy Octopush-DM",
+    "octopushEndpoint": "octopush (endpoint: {url})",
+    "legacyOctopushEndpoint": "Legacy Octopush-DM (endpoint: {url})",
     "ntfy Topic": "ntfy Topic",
     "Server URL should not contain the nfty topic": "Server URL should not contain the nfty topic",
     "onebotHttpAddress": "OneBot HTTP Address",

src/pages/EditMaintenance.vue

@@ -132,7 +132,7 @@
                                     <label for="cron" class="form-label">
                                         {{ $t("cronExpression") }}
                                     </label>
-                                    <p>{{ $t("cronSchedule") }}{{ cronDescription }}</p>
+                                    <p>{{ $t("cronScheduleDescription", { description: cronDescription }) }}</p>
                                     <input
                                         id="cron"
                                         v-model="maintenance.cron"

src/pages/StatusPage.vue

@@ -342,14 +342,20 @@
 
                 <!-- Incident Date -->
                 <div class="date mt-3">
-                    {{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{
-                        dateFromNow(incident.createdDate)
-                    }})
+                    {{
+                        $t("dateCreatedAtFromNow", {
+                            date: $root.datetime(incident.createdDate),
+                            fromNow: dateFromNow(incident.createdDate),
+                        })
+                    }}
                     <br />
                     <span v-if="incident.lastUpdatedDate">
-                        {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{
-                            dateFromNow(incident.lastUpdatedDate)
-                        }})
+                        {{
+                            $t("lastUpdatedAtFromNow", {
+                                date: $root.datetime(incident.lastUpdatedDate),
+                                fromNow: dateFromNow(incident.lastUpdatedDate),
+                            })
+                        }}
                     </span>
                 </div>
 
@@ -572,7 +578,7 @@
                 </p>
 
                 <div class="refresh-info mb-2">
-                    <div>{{ $t("Last Updated") }}: {{ lastUpdateTimeDisplay }}</div>
+                    <div>{{ $t("lastUpdatedAt", { date: lastUpdateTimeDisplay }) }}</div>
                     <div data-testid="update-countdown-text">
                         {{ $tc("statusPageRefreshIn", [updateCountdownText]) }}
                     </div>