feat: Make hosting marketing page translatable (#5145)

* feat: make hosting marketing page translatable, part 1

* format what we've got so far

* lint and fix locale setting

* the rest of the owl, almost

still one more message in MedalPlanPromotion that's a bit annoying because of all the inline styles

* finishing touches

some things just shouldn't be questioned, i guess. that's two for two on issues that occur even though i seem to have done everything right. i give up

* whoops, that's literal

* get back in the span, you

* fix typo + lint

* and now it works

* one more fix

packages/ui/src/components/billing/ServersSpecs.vue

@@ -2,8 +2,35 @@
 import { CpuIcon, DatabaseIcon, MemoryStickIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import AutoLink from '../base/AutoLink.vue'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	gbRam: {
+		id: 'hosting.specs.gb-ram',
+		defaultMessage: '{ram} GB RAM',
+	},
+	gbStorage: {
+		id: 'hosting.specs.gb-storage',
+		defaultMessage: '{storage} GB Storage',
+	},
+	sharedCpus: {
+		id: 'hosting.specs.shared-cpus',
+		defaultMessage: '{cpus} Shared CPUs',
+	},
+	burst: {
+		id: 'hosting.specs.burst',
+		defaultMessage: 'Bursts up to {cpus} CPUs',
+	},
+	burstTooltip: {
+		id: 'hosting.specs.burst.tooltip',
+		defaultMessage:
+			'CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info.',
+	},
+})
+
 const emit = defineEmits<{
 	(e: 'click-bursting-link'): void
 }>()
@@ -29,20 +56,22 @@ const sharedCpus = computed(() => {
 <template>
 	<ul class="m-0 flex list-none flex-col gap-2 px-0 text-sm leading-normal text-secondary">
 		<li class="flex items-center gap-2">
-			<MemoryStickIcon class="h-5 w-5 shrink-0" /> {{ formattedRam }} GB RAM
+			<MemoryStickIcon class="h-5 w-5 shrink-0" />
+			{{ formatMessage(messages.gbRam, { ram: formattedRam }) }}
 		</li>
 		<li class="flex items-center gap-2">
-			<DatabaseIcon class="h-5 w-5 shrink-0" /> {{ formattedStorage }} GB Storage
+			<DatabaseIcon class="h-5 w-5 shrink-0" />
+			{{ formatMessage(messages.gbStorage, { storage: formattedStorage }) }}
 		</li>
 		<li class="flex items-center gap-2">
-			<CpuIcon class="h-5 w-5 shrink-0" /> {{ sharedCpus }} Shared CPUs
+			<CpuIcon class="h-5 w-5 shrink-0" />
+			{{ formatMessage(messages.sharedCpus, { cpus: sharedCpus }) }}
 		</li>
 		<li class="flex items-center gap-2">
-			<SparklesIcon class="h-5 w-5 shrink-0" /> Bursts up to {{ cpus }} CPUs
+			<SparklesIcon class="h-5 w-5 shrink-0" />
+			{{ formatMessage(messages.burst, { cpus: props.cpus }) }}
 			<AutoLink
-				v-tooltip="
-					`CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info.`
-				"
+				v-tooltip="formatMessage(messages.burstTooltip)"
 				class="flex"
 				to="https://modrinth.com/hosting#cpu-burst"
 				target="_blank"

packages/ui/src/locales/en-US/index.json

@@ -239,6 +239,21 @@
   "form.placeholder.state": {
     "defaultMessage": "Enter state/province"
   },
+  "hosting.specs.burst": {
+    "defaultMessage": "Bursts up to {cpus} CPUs"
+  },
+  "hosting.specs.burst.tooltip": {
+    "defaultMessage": "CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info."
+  },
+  "hosting.specs.gb-ram": {
+    "defaultMessage": "{ram} GB RAM"
+  },
+  "hosting.specs.gb-storage": {
+    "defaultMessage": "{storage} GB Storage"
+  },
+  "hosting.specs.shared-cpus": {
+    "defaultMessage": "{cpus} Shared CPUs"
+  },
   "icon-select.edit": {
     "defaultMessage": "Edit icon"
   },