Translate pages

modrinth · Nov 21, 2022 · a753e4a · a753e4a
1 parent 1d19fdd
commit a753e4a
Show file tree

Hide file tree

Showing 11 changed files with 1,643 additions and 400 deletions.
diff --git a/i18n/en-US/index.toml b/i18n/en-US/index.toml
diff --git a/layouts/default.vue b/layouts/default.vue
diff --git a/layouts/error.vue b/layouts/error.vue
@@ -2,17 +2,19 @@
   <div class="main">
     <div class="error">
       <Logo404 v-if="error.statusCode === 404" />
-      <h1 v-else>An error occured!</h1>
+      <h1 v-else>
+        {{ $t('error-page.title') }}
+      </h1>
       <p>{{ error.message }}</p>
       <div class="button-group">
         <nuxt-link to="/" class="iconified-button raised-button brand-button">
-          Go home
+          {{ $t('error-page.action.home') }}
         </nuxt-link>
         <a
           href="https://discord.gg/EUHuJHt"
           class="iconified-button raised-button"
         >
-          Get help on Discord
+          {{ $t('error-page.action.discord') }}
         </a>
       </div>
     </div>
@@ -33,7 +35,7 @@ export default {
       default() {
         return {
           statusCode: 1000,
-          message: 'Unknown error',
+          message: this.$t('error-page.default-message'),
         }
       },
     },

diff --git a/pages/_type/_id/changelog.vue b/pages/_type/_id/changelog.vue
@@ -19,41 +19,51 @@
         <div class="version-wrapper">
           <div class="version-header">
             <div class="version-header-text">
-              <h2 class="name">
-                <nuxt-link
-                  :to="`/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURI(version.displayUrlEnding)}`"
-                  >{{ version.name }}</nuxt-link
-                >
-              </h2>
-              <span v-if="members.find((x) => x.user.id === version.author_id)">
-                by
-                <nuxt-link
-                  class="text-link"
-                  :to="
-                    '/user/' +
-                    members.find((x) => x.user.id === version.author_id).user
-                      .username
-                  "
-                  >{{
-                    members.find((x) => x.user.id === version.author_id).user
-                      .username
-                  }}</nuxt-link
-                >
-              </span>
-              <span>
-                on
-                {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
+              <IntlFormatted
+                :message-id="
+                  members.find((x) => x.user.id === version.author_id)
+                    ? 'project.changelog.item.default'
+                    : 'project.changelog.item.authorless'
+                "
+                :values="{ publishedAt: new Date(version.date_published) }"
+                :tags="['span']"
               >
+                <template #~version>
+                  <h2 class="name">
+                    <nuxt-link
+                      :to="`/${project.project_type}/${
+                        project.slug ? project.slug : project.id
+                      }/version/${encodeURI(version.displayUrlEnding)}`"
+                      v-text="version.name"
+                    />
+                  </h2>
+                </template>
+                <template
+                  v-if="members.find((x) => x.user.id === version.author_id)"
+                  #~author
+                >
+                  <nuxt-link
+                    class="text-link"
+                    :to="
+                      '/user/' +
+                      members.find((x) => x.user.id === version.author_id).user
+                        .username
+                    "
+                    v-text="
+                      members.find((x) => x.user.id === version.author_id).user
+                        .username
+                    "
+                  />
+                </template>
+              </IntlFormatted>
             </div>
             <a
               :href="$parent.findPrimary(version).url"
               class="iconified-button download"
               :title="`Download ${version.name}`"
             >
               <DownloadIcon aria-hidden="true" />
-              Download
+              {{ $t('generic.action.download') }}
             </a>
           </div>
           <div
@@ -120,8 +130,14 @@ export default {
     })
   },
   head() {
-    const title = `${this.project.title} - Changelog`
-    const description = `Explore the changelog of ${this.project.title}'s ${this.versions.length} versions.`
+    const title = this.$t('project.changelog.meta.title', {
+      project: this.project.title,
+    })
+
+    const description = this.$t('project.changelog.meta.description', {
+      project: this.project.title,
+      versions: this.versions.length,
+    })
 
     return {
       title,
@@ -238,6 +254,7 @@ export default {
   display: flex;
   align-items: center;
   margin-top: 0.2rem;
+  column-gap: 0.25rem;
 
   .circle {
     min-width: 0.75rem;