Translate components

components/ads/Advertisement.vue

@@ -15,11 +15,7 @@
               />
               <DarkIcon v-else class="brand-icon" />
               <span>
-                <span> Host your Minecraft server on </span>
-                <strong>exaroton</strong>
-                <span>
-                  - only pay while the server is running - billed per second.
-                </span>
+                <IntlFormatted message-id="ads.exaroton" :tags="['strong']" />
               </span>
             </a>
           </div>
@@ -30,7 +26,10 @@
             target="_blank"
             href="https://modrinth.com"
           >
-            Ads via Adrinth
+            <IntlFormatted
+              message-id="component.advertisement.provider"
+              :values="{ provider: 'Adrinth' }"
+            />
           </a>
         </div>
       </div>

components/ui/Chips.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="chips">
     <button
-      v-for="item in items"
-      :key="item"
+      v-for="(item, index) of items"
+      :key="index"
       class="iconified-button"
       :class="{ selected: selected === item }"
       @click="toggleItem(item)"
@@ -24,7 +24,6 @@ export default {
   props: {
     value: {
       required: true,
-      type: String,
     },
     items: {
       required: true,
@@ -35,7 +34,9 @@ export default {
       type: Boolean,
     },
     formatLabel: {
-      default: (x) => x,
+      default() {
+        return (x) => String(x)
+      },
       type: Function,
     },
   },

components/ui/CopyCode.vue

@@ -2,7 +2,7 @@
   <button
     class="code"
     :class="{ copied }"
-    title="Copy code to clipboard"
+    :title="$t('component.copy-code.title')"
     @click="copyText"
   >
     {{ text }}

components/ui/FileInput.vue

@@ -29,7 +29,9 @@ export default {
   props: {
     prompt: {
       type: String,
-      default: 'Select file',
+      default() {
+        return this.$t('component.file-input.default-prompt')
+      },
     },
     multiple: {
       type: Boolean,
@@ -39,9 +41,7 @@ export default {
       type: String,
       default: null,
     },
-    /**
-     * The max file size in bytes
-     */
+    /** The max file size in bytes */
     maxSize: {
       type: Number,
       default: null,

components/ui/ModalConfirm.vue

@@ -4,9 +4,11 @@
       <div class="markdown-body" v-html="$xss($md.render(description))"></div>
       <label v-if="hasToType" for="confirmation" class="confirmation-label">
         <span>
-          <strong>To verify, type</strong>
-          <em class="confirmation-text">{{ confirmationText }}</em>
-          <strong>below:</strong>
+          <IntlFormatted message-id="component.modal-confirm.verify-text">
+            <template #~confirmationText>
+              <strong>{{ confirmationText }}</strong>
+            </template>
+          </IntlFormatted>
         </span>
       </label>
       <div class="confirmation-input">
@@ -15,14 +17,14 @@
           id="confirmation"
           v-model="confirmation_typed"
           type="text"
-          placeholder="Type here..."
+          :placeholder="$t('component.modal-confirm.verify-text-placeholder')"
           @input="type"
         />
       </div>
       <div class="button-group">
         <button class="iconified-button" @click="cancel">
           <CrossIcon />
-          Cancel
+          {{ $t('generic.action.cancel') }}
         </button>
         <button
           class="iconified-button danger-button"
@@ -60,17 +62,23 @@ export default {
     },
     title: {
       type: String,
-      default: 'No title defined',
+      default() {
+        return this.$t('component.modal-confirm.default-title')
+      },
       required: true,
     },
     description: {
       type: String,
-      default: 'No description defined',
+      default() {
+        return this.$t('component.modal-confirm.default-description')
+      },
       required: true,
     },
     proceedLabel: {
       type: String,
-      default: 'Proceed',
+      default() {
+        return this.$t('component.modal-confirm.default-action')
+      },
     },
   },
   data() {

components/ui/ModalCreation.vue

@@ -1,42 +1,60 @@
 <template>
-  <Modal ref="modal" header="Create a project">
+  <Modal ref="modal" :header="$t('component.modal-creation.title')">
     <div class="modal-creation universal-labels">
       <div class="markdown-body">
         <p>
-          New projects are created as drafts and can be found under your profile
-          page.
+          {{ $t('component.modal-creation.description') }}
         </p>
       </div>
       <label for="project-type">
-        <span class="label__title"
-          >Project type<span class="required">*</span></span
-        >
+        <span class="label__title">
+          <IntlFormatted
+            message-id="component.modal-creation.fields.project-type.title"
+          >
+            <template #required="{ children }">
+              <span class="required"><Fragment :of="children" /></span>
+            </template>
+          </IntlFormatted>
+        </span>
       </label>
       <Chips
         id="project-type"
         v-model="projectType"
-        :items="$tag.projectTypes.map((x) => x.display)"
+        :items="this.$tag.projectTypes"
+        :format-label="({ id }) => $translateProjectType(id)"
       />
       <label for="name">
-        <span class="label__title">Name<span class="required">*</span></span>
+        <span class="label__title">
+          <IntlFormatted
+            message-id="component.modal-creation.fields.name.title"
+          >
+            <template #required="{ children }">
+              <span class="required"><Fragment :of="children" /></span>
+            </template>
+          </IntlFormatted>
+        </span>
       </label>
       <input
         id="name"
         v-model="name"
         type="text"
         maxlength="64"
-        placeholder="Enter project name..."
+        :placeholder="$t('component.modal-creation.fields.name.placeholder')"
         autocomplete="off"
         @input="updatedName()"
       />
       <label for="slug">
-        <span class="label__title">URL<span class="required">*</span></span>
+        <span class="label__title">
+          <IntlFormatted message-id="component.modal-creation.fields.url.title">
+            <template #required="{ children }">
+              <span class="required"><Fragment :of="children" /></span>
+            </template>
+          </IntlFormatted>
+        </span>
       </label>
       <div class="text-input-wrapper">
         <div class="text-input-wrapper__before">
-          https://modrinth.com/{{
-            getProjectType() ? getProjectType().id : '???'
-          }}/
+          https://modrinth.com/{{ projectType ? projectType.id : '???' }}/
         </div>
         <input
           id="slug"
@@ -48,11 +66,18 @@
         />
       </div>
       <label for="additional-information">
-        <span class="label__title">Summary<span class="required">*</span></span>
-        <span class="label__description"
-          >This appears in search and on the sidebar of your project's
-          page.</span
-        >
+        <span class="label__title">
+          <IntlFormatted
+            message-id="component.modal-creation.fields.summary.title"
+          >
+            <template #required="{ children }">
+              <span class="required"><Fragment :of="children" /></span>
+            </template>
+          </IntlFormatted>
+        </span>
+        <span class="label__description">
+          {{ $t('component.modal-creation.fields.summary.description') }}
+        </span>
       </label>
       <div class="textarea-wrapper">
         <textarea
@@ -64,11 +89,11 @@
       <div class="push-right input-group">
         <button class="iconified-button" @click="cancel">
           <CrossIcon />
-          Cancel
+          {{ $t('generic.action.cancel') }}
         </button>
         <button class="iconified-button brand-button" @click="createProject">
           <CheckIcon />
-          Continue
+          {{ $t('generic.action.continue') }}
         </button>
       </div>
     </div>
@@ -101,7 +126,7 @@ export default {
   },
   data() {
     return {
-      projectType: this.$tag.projectTypes[0].display,
+      projectType: this.$tag.projectTypes[0],
       name: '',
       slug: '',
       description: '',
@@ -112,44 +137,50 @@ export default {
     cancel() {
       this.$refs.modal.hide()
     },
-    getProjectType() {
-      return this.$tag.projectTypes.find((x) => this.projectType === x.display)
-    },
     async createProject() {
       this.$nuxt.$loading.start()
 
-      const projectType = this.getProjectType()
+      const projectType = this.projectType
 
       const formData = new FormData()
 
-      formData.append(
+      this.$i18n.formData.append(
         'data',
         JSON.stringify({
           title: this.name,
           project_type: projectType.actual,
           slug: this.slug,
           description: this.description,
-          body: `# Placeholder description
-This is your new ${projectType.display}, ${
-            this.name
-          }. A checklist below is provided to help prepare for release.
-
-### Before submitting for review
-- Upload at least one version
-- [Edit project description](https://modrinth.com/${this.getProjectType().id}/${
-            this.slug
-          }/edit)
-- Update metadata
-  - Select license
-  - Set up environments
-  - Choose categories
-  - Add source, wiki, Discord and donation links (optional)
-- Add images to gallery (optional)
-- Invite project team members (optional)
-
-> Submissions are normally reviewed within 24 hours, but may take up to 48 hours
-
-Questions? [Join the Modrinth Discord for support!](https://discord.gg/EUHuJHt)`,
+          body: (() => {
+            let body = ''
+
+            if (
+              this.$i18n.intlLocale.language !== 'en' ||
+              this.$i18n.locale.includes('-x-')
+            ) {
+              body += this.$t(
+                'component.modal-creation.auto-description.warning',
+                {
+                  projectType: this.projectType.id,
+                }
+              )
+              body += '\n\n'
+            }
+
+            body += this.$fmt.customMessage(
+              this.$i18n.data['starter.md'],
+              {
+                projectType: this.projectType.id,
+                projectName: this.name,
+                editLink: `https://modrinth.com/${this.projectType.id}/${this.slug}/edit`,
+              },
+              {
+                ignoreTag: true,
+              }
+            )
+
+            return body
+          })(),
           initial_versions: [],
           team_members: [
             {
@@ -186,15 +217,15 @@ Questions? [Join the Modrinth Discord for support!](https://discord.gg/EUHuJHt)`
       } catch (err) {
         this.$notify({
           group: 'main',
-          title: 'An error occurred',
+          title: this.$t('generic.error.title'),
           text: err.response.data.description,
           type: 'error',
         })
       }
       this.$nuxt.$loading.finish()
     },
     show() {
-      this.projectType = this.$tag.projectTypes[0].display
+      this.projectType = this.$tag.projectTypes[0]
       this.name = ''
       this.slug = ''
       this.description = ''