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

apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue

@@ -10,12 +10,14 @@
 			<MedalIcon class="h-8 w-auto text-contrast md:h-10" />
 			<div class="flex flex-col items-start gap-1">
 				<span>
-					Try a free
-					<span class="text-medal-orange">3GB server</span> for 5 days powered by
-					<span class="text-medal-orange">Medal</span>
+					<IntlFormatted :message-id="messages.info">
+						<template #orange="{ children }">
+							<span class="text-medal-orange"><component :is="() => children" /></span>
+						</template>
+					</IntlFormatted>
 				</span>
 				<span class="text-xs font-medium text-secondary md:text-sm">
-					Limited-time offer. No credit card required. Available for US servers.
+					{{ formatMessage(messages.textSecondary) }}
 				</span>
 			</div>
 		</div>
@@ -23,7 +25,7 @@
 			<nuxt-link
 				to="https://medal.tv/modrinth"
 				class="z-10 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
-				>Learn more <ExternalIcon
+				>{{ formatMessage(messages.learnMoreButton) }} <ExternalIcon
 			/></nuxt-link>
 		</ButtonStyled>
 	</div>
@@ -31,9 +33,33 @@
 
 <script lang="ts" setup>
 import { ExternalIcon } from '@modrinth/assets'
-import { ButtonStyled, MedalBackgroundImage } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	IntlFormatted,
+	MedalBackgroundImage,
+	useVIntl,
+} from '@modrinth/ui'
 
 import MedalIcon from '~/assets/images/illustrations/medal_icon.svg?component'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	info: {
+		id: 'hosting-marketing.medal.info',
+		defaultMessage:
+			'Try a free <orange>3GB server</orange> for 5 days powered by <orange>Medal</orange>',
+	},
+	textSecondary: {
+		id: 'hosting-marketing.medal.text-secondary',
+		defaultMessage: 'Limited-time offer. No credit card required. Available for US servers.',
+	},
+	learnMoreButton: {
+		id: 'hosting-marketing.medal.learn-more',
+		defaultMessage: 'Learn more',
+	},
+})
 </script>
 
 <style scoped lang="scss">

apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { MessageDescriptor } from '@modrinth/ui'
-import { ButtonStyled, defineMessage, ServersSpecs, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessage, defineMessages, ServersSpecs, useVIntl } from '@modrinth/ui'
 import { formatPrice } from '@modrinth/utils'
 
 const { formatMessage, locale } = useVIntl()
@@ -11,6 +11,17 @@ const emit = defineEmits<{
 
 type Plan = 'small' | 'medium' | 'large'
 
+const messages = defineMessages({
+	outOfStock: {
+		id: 'hosting.plan.out-of-stock',
+		defaultMessage: 'Out of stock',
+	},
+	selectPlanButton: {
+		id: 'hosting.plan.select-plan',
+		defaultMessage: 'Select plan',
+	},
+})
+
 const plans: Record<
 	Plan,
 	{
@@ -134,8 +145,12 @@ const billingMonths = computed(() => {
 				:type="plans[plan].mostPopular ? 'standard' : 'highlight-colored-text'"
 				size="large"
 			>
-				<span v-if="outOfStock" class="button-like disabled"> Out of Stock </span>
-				<button v-else @click="() => emit('select')">Select plan</button>
+				<span v-if="outOfStock" class="button-like disabled">{{
+					formatMessage(messages.outOfStock)
+				}}</span>
+				<button v-else @click="() => emit('select')">
+					{{ formatMessage(messages.selectPlanButton) }}
+				</button>
 			</ButtonStyled>
 			<ServersSpecs
 				:ram="ram"