Add internationalization support (#738)

pages/[type]/[id]/gallery.vue

@@ -150,10 +150,10 @@
               : 'https://cdn.modrinth.com/placeholder-banner.svg'
           "
           :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-          @click.stop=""
+          @click.stop
         />
 
-        <div class="floating" @click.stop="">
+        <div class="floating" @click.stop>
           <div class="text">
             <h2 v-if="expandedGalleryItem.title">
               {{ expandedGalleryItem.title }}

pages/frog.vue

@@ -1,11 +1,59 @@
+<script setup lang="ts">
+const vintl = useVIntl()
+const { formatMessage } = vintl
+
+const messages = defineMessages({
+  frogTitle: {
+    id: 'frog.title',
+    defaultMessage: 'Frog',
+  },
+  frogDescription: {
+    id: 'frog',
+    defaultMessage: "You've been frogged! 🐸",
+  },
+  frogAltText: {
+    id: 'frog.altText',
+    defaultMessage: 'A photorealistic painting of a frog labyrinth',
+  },
+  frogSinceOpened: {
+    id: 'frog.sinceOpened',
+    defaultMessage: 'This page was opened {ago}',
+  },
+  frogFroggedPeople: {
+    id: 'frog.froggedPeople',
+    defaultMessage:
+      '{count, plural, one {{count} more person} other {{count} more people}} were also frogged!',
+  },
+})
+
+const formatCompactNumber = useCompactNumber()
+
+const formatRelativeTime = useRelativeTime()
+
+const pageOpen = useState('frogPageOpen', () => Date.now())
+const peopleFrogged = useState('frogPeopleFrogged', () => Math.round(Math.random() * 100_000_000))
+const peopleFroggedCount = computed(() => formatCompactNumber(peopleFrogged.value))
+
+let interval: ReturnType<typeof setTimeout>
+
+const formattedOpenedCounter = ref(formatRelativeTime(Date.now()))
+
+onMounted(() => {
+  interval = setInterval(() => {
+    formattedOpenedCounter.value = formatRelativeTime(pageOpen.value)
+  }, 1000)
+})
+
+onUnmounted(() => clearInterval(interval))
+</script>
+
 <template>
   <div class="card">
-    <h1>Frog</h1>
-    <p>You've been frogged! 🐸</p>
-    <img
-      src="https://cdn.modrinth.com/frog.png"
-      alt="a photorealistic painting of a frog labyrinth"
-    />
+    <h1>{{ formatMessage(messages.frogTitle) }}</h1>
+    <p>{{ formatMessage(messages.frogDescription) }}</p>
+    <img src="https://cdn.modrinth.com/frog.png" :alt="formatMessage(messages.frogAltText)" />
+    <p>{{ formatMessage(messages.frogSinceOpened, { ago: formattedOpenedCounter }) }}</p>
+    <p>{{ formatMessage(messages.frogFroggedPeople, { count: peopleFroggedCount }) }}</p>
   </div>
 </template>