allow "visit the stable" text to be translated

website/client/components/inventory/stable/hatchedPetDialog.vue

@@ -12,13 +12,7 @@
           div(:class="pet.class")
 
         h4.title {{ pet.name }}
-        div.text(v-if="!hideText")
+        div.text(v-if="!hideText", v-markdown="$t('hatchedPetHowToUse')")
-          | Visit the
-          |
-          router-link(:to="{name: 'stable'}") {{ $t('stable') }}
-          |
-          | to feed and equip your newest pet!
-          // @TODO make translatable with the entire sentence in one string (translators can't do sentences in multiple parts)
 
         button.btn.btn-primary(@click="close()") {{ $t('onward') }}
 
@@ -70,6 +64,7 @@
 
 <script>
   import bModal from 'bootstrap-vue/lib/components/modal';
+  import markdownDirective from 'client/directives/markdown';
 
   export default {
     components: {
@@ -80,6 +75,9 @@
         pet: null,
       };
     },
+    directives: {
+      markdown: markdownDirective,
+    },
     created () {
 
     },

website/common/locales/en/pets.json

@@ -75,6 +75,7 @@
   "hatchAPot": "Hatch a new <%= potion %> <%= egg %>?",
   "hatchedPet": "You hatched a new <%= potion %> <%= egg %>!",
   "hatchedPetGeneric": "You hatched a new pet!",
+  "hatchedPetHowToUse": "Visit the [Stable](/inventory/stable) to feed and equip your newest pet!",
   "displayNow": "Display Now",
   "displayLater": "Display Later",
   "petNotOwned": "You do not own this pet.",