feat: replace hard-coded content with i18n translation keys

src/components/AttributionTable.vue

@@ -24,8 +24,12 @@ defineProps<Props>();
   <table class="attribution-table">
     <thead class="attribution-table__head">
       <tr class="attribution-table__row">
-        <th class="attribution-table__heading artwork">Artwork</th>
+        <th class="attribution-table__heading artwork">
-        <th class="attribution-table__heading artist">Artist</th>
+          {{ $t("attributions.artwork.headings[0]") }}
+        </th>
+        <th class="attribution-table__heading artist">
+          {{ $t("attributions.artwork.headings[1]") }}
+        </th>
       </tr>
     </thead>
     <tbody class="attribution-table__body">

src/components/ColorTable.vue

@@ -15,14 +15,14 @@ defineProps<Props>();
   <table class="color-table">
     <thead class="color-table__head">
       <tr class="color-table__row">
-        <th class="color-table__heading name">Body part</th>
+        <th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
-        <th class="color-table__heading value">Value</th>
+        <th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
-        <th class="color-table__heading color">Color</th>
+        <th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
       </tr>
     </thead>
     <tbody class="color-table__body">
       <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
-        <td class="color-table__cell name">{{ color.name }}</td>
+        <td class="color-table__cell name">{{ $t(color.name) }}</td>
         <td class="color-table__cell value">{{ color.value }}</td>
         <td
           class="color-table__cell color"

src/components/DataTable.vue

@@ -16,14 +16,14 @@ defineProps<Props>();
           v-for="(heading, idx) in headings"
           :key="idx"
         >
-          {{ heading }}
+          {{ $t(heading) }}
         </th>
       </tr>
     </thead>
     <tbody class="data-table__body">
       <tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
         <td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
-          {{ cell }}
+          {{ $t(cell) }}
         </td>
       </tr>
     </tbody>

src/router/index.ts

@@ -18,7 +18,7 @@ const router = createRouter({
       name: "home",
       component: HomeView,
       meta: {
-        title: "Home",
+        title: "nav.home",
         icon: HomeIcon,
       },
     },
@@ -27,7 +27,7 @@ const router = createRouter({
       name: "general",
       component: () => import("@/views/GeneralView.vue"),
       meta: {
-        title: "General",
+        title: "nav.general",
         icon: IdCardIcon,
       },
     },
@@ -36,7 +36,7 @@ const router = createRouter({
       name: "anatomy",
       component: () => import("@/views/AnatomyView.vue"),
       meta: {
-        title: "Anatomy",
+        title: "nav.anatomy",
         icon: PaletteIcon,
       },
     },
@@ -45,7 +45,7 @@ const router = createRouter({
       name: "career-path",
       component: () => import("@/views/CareerPathView.vue"),
       meta: {
-        title: "Career Path",
+        title: "nav.careerPath",
         icon: BriefcaseIcon,
       },
     },
@@ -54,7 +54,7 @@ const router = createRouter({
       name: "attributions",
       component: () => import("@/views/AttributionsView.vue"),
       meta: {
-        title: "Attributions",
+        title: "nav.attributions",
         icon: CircleInfoIcon,
       },
     },

src/views/AnatomyView.vue

@@ -3,20 +3,20 @@ import RefImage from "@/components/RefImage.vue";
 import ColorTable from "@/components/ColorTable.vue";
 
 const colors = [
-  { name: "Front", value: "#e7c7b1" },
+  { name: "data.colors.front", value: "#e7c7b1" },
-  { name: "Arms, legs", value: "#493428" },
+  { name: "data.colors.limbs", value: "#493428" },
-  { name: "Back Main", value: "#422322" },
+  { name: "data.colors.back", value: "#422322" },
-  { name: "Back Spine", value: "#341c1c" },
+  { name: "data.colors.spine", value: "#341c1c" },
-  { name: "Highlight scales, tissue", value: "#6bb9db" },
+  { name: "data.colors.tissue", value: "#6bb9db" },
-  { name: "Spikes, tail club", value: "#f8ebdd" },
+  { name: "data.colors.spikes", value: "#f8ebdd" },
-  { name: "Eyes primary", value: "#a7eef1" },
+  { name: "data.colors.eyesPrimary", value: "#a7eef1" },
-  { name: "Eyes secondary", value: "#6dabd1" },
+  { name: "data.colors.eyesSecondary", value: "#6dabd1" },
 ];
 </script>
 
 <template>
   <section>
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
   </section>
 
   <RefImage dropshadow>
@@ -65,36 +65,20 @@ const colors = [
           @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        alt="Viktor Ref by sabertoofs"
+        :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
         loading="lazy"
       />
     </template>
 
     <template #caption>
-      Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+      {{ $t('anatomy.images.back.caption') }} &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
     </template>
   </RefImage>
 
   <ColorTable :colors="colors"></ColorTable>
 
   <section>
-    <p>
+    <p v-for="p in $tm('anatomy.paragraphs[0]')">{{ p }}</p>
-      Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly
-      bicolored, with several shades of brown.
-    </p>
-
-    <p>
-      His forehead, nose, chest, belly and crotch are of light desert sand
-      colors that run through the underside of his tail.
-    </p>
-
-    <p>
-      His cheeks, shoulders, back and thighs, in contrast, stand out with a rich
-      walnut brown, which is also found on the sides of his tail. From the back
-      of his head, down his spine and across the top of his tail is a continuous
-      strip of deep dark cedar brown. Arms and legs are distinguished by a light
-      earthy brown.
-    </p>
   </section>
 
   <RefImage dropshadow>
@@ -161,36 +145,18 @@ const colors = [
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        alt="Viktor frontal shot by sabertoofs"
+        :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
         loading="lazy"
       />
     </template>
 
     <template #caption>
-      Viktor frontal shot &copy;
+      {{ $t("anatomy.images.front.caption") }} &copy;
       <a href="http://twitter.com/sabertoofs">sabertoofs</a>
     </template>
   </RefImage>
 
   <section>
-    <p>
+    <p v-for="p in $tm('anatomy.paragraphs[1]')">{{ p }}</p>
-      His entire body is speckled with scattered aquamarine spots, which come in
-      pairs of one large and one small spot. The only exceptions are the spots
-      on his cheeks and behind his lower cheek horns, which come in threes and
-      his the top side of his snout, which sports a big single spot. Mouth,
-      tongue, nostrils and any other tissue of his body also feature this color.
-    </p>
-
-    <p>His eyes shine with a mixture of light sea green and electric blue.</p>
-
-    <p>
-      Horns and claws are of a typical bone white. Starting with the double pair
-      of horns on his head, a parallel line of horns continues down his back,
-      with additional horns adorning his shoulders and thighs. His tail is also
-      armed with horns on both sides along its entire length. At the tip of the
-      tail is a club-like ossification that he can use for fending off foes.
-    </p>
-
-    <p>He owes his strong, stocky physique to years of hard physical labor.</p>
   </section>
 </template>

src/views/AttributionsView.vue

@@ -26,23 +26,23 @@ const attributions = [
 
 <template>
   <section>
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <h2>Artwork</h2>
+    <h2>{{ $t("attributions.artwork.heading") }}</h2>
   </section>
   <AttributionTable :attributions="attributions" />
   <section>
-    <h2>Other</h2>
+    <h2>{{ $t("attributions.other.heading") }}</h2>
   </section>
   <table>
     <thead>
       <tr>
-        <th>Type</th>
+        <th>{{ $t("attributions.other.headings[0]") }}</th>
-        <th>Source</th>
+        <th>{{ $t("attributions.other.headings[1]") }}</th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td>Icons</td>
+        <td>{{ $t("attributions.other.icons[0]") }}</td>
         <td>
           <a
             href="https://fontawesome.com/license/free"
@@ -54,7 +54,7 @@ const attributions = [
         </td>
       </tr>
       <tr>
-        <td>Heading Font</td>
+        <td>{{ $t("attributions.other.headingFont[0]") }}</td>
         <td>
           <a
             href="https://github.com/MichalSahar/Secular"
@@ -63,7 +63,7 @@ const attributions = [
           >
             Secular One
           </a>
-          by
+          {{ $t("attributions.other.headingFont[1]") }}
           <a
             href="https://github.com/MichalSahar"
             target="_blank"
@@ -74,7 +74,7 @@ const attributions = [
         </td>
       </tr>
       <tr>
-        <td>Copy Font</td>
+        <td>{{ $t("attributions.other.copyFont[0]") }}</td>
         <td>
           <a
             href="https://antonkoovit.com/typefaces/arvo"
@@ -83,7 +83,7 @@ const attributions = [
           >
             Arvo
           </a>
-          by
+          {{ $t("attributions.other.copyFont[1]") }}
           <a
             href="https://antonkoovit.com/"
             target="_blank"
@@ -94,9 +94,9 @@ const attributions = [
         </td>
       </tr>
       <tr>
-        <td>Background</td>
+        <td>{{ $t("attributions.other.background[0]") }}</td>
         <td>
-          Layered Waves from
+          {{ $t("attributions.other.background[1][0]") }}
           <a
             href="https://haikei.app/"
             target="_blank"
@@ -104,7 +104,7 @@ const attributions = [
           >
             Haikei
           </a>
-          by
+          {{ $t("attributions.other.background[1][1]") }}
           <a
             href="https://zcreativelabs.com/"
             target="_blank"

src/views/CareerPathView.vue

@@ -8,144 +8,32 @@ import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
 import IndustryIcon from "@/assets/icons/IndustryIcon.vue";
 import TruckIcon from "@/assets/icons/TruckIcon.vue";
 import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
+
+const jobIcons = [
+  WhiskeyGlassIcon,
+  TreeIcon,
+  CarIcon,
+  HelmetSafetyIcon,
+  IndustryIcon,
+  TruckIcon,
+  BoxesIcon,
+];
 </script>
 
 <template>
   <section>
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <p>
+    <p v-for="p in $tm('career.paragraphs')">{{ p }}</p>
-      Viktor's had many different jobs in the past, some of which where very
-      formative, other's just paid the bills.
-    </p>
   </section>
 
   <TimelineList>
-    <TimelineItem>
+    <TimelineItem v-for="(job, idx) in $tm('career.jobs')">
-      <template #icon><WhiskeyGlassIcon /></template>
+      <template #icon>
-      <template #headline>Bartender</template>
+        <component :is="jobIcons[idx as number]"></component>
-      <template #content>
-        <p>
-          Viktor's professional career began as a bartender at a pub in his
-          hometown. There he often doubled as a bouncer when a few guests got
-          too drunk and started making a fuss. A defining moment of that job was
-          when someone climbed over the counter and threatened him with a broken
-          bottle. Wrestled to the ground and with a broken bottle in front of
-          his face, he had to make a split-second decision. With a powerful
-          swing of his tail bone, he knocked the attacker down. This experience
-          taught him the importance of effectively defending himself against
-          unpleasant fellows and to eliminate threats before they get close to
-          him ever again.
-        </p>
       </template>
-    </TimelineItem>
+      <template #headline>{{ job.title }}</template>
-    <TimelineItem>
-      <template #icon><TreeIcon /></template>
-      <template #headline>Lumberjack</template>
       <template #content>
-        <p>
+        <p>{{ job.desc }}</p>
-          After leaving his hometown, Viktor started working as a lumberjack.
-          The club at the end of his tail came very much in handy as a
-          counterweight for each swing of his axe, allowing him to strike
-          efficiently and powerfully, felling even the largest trees with
-          relative ease. His naturally tough scales protected him from splinters
-          from the felled wood. The long-lasting hard physical work toughened
-          his body over the years. Before taking the cut logs to the sawmill,
-          Viktor always took a break to rest in the peace and quiet of the
-          forest. Although he enjoyed the seclusion of the country life for a
-          while, he was longing for the sociability of city life again.
-        </p>
-      </template>
-    </TimelineItem>
-    <TimelineItem>
-      <template #icon><CarIcon /></template>
-      <template #headline>Car Mechanic</template>
-      <template #content>
-        <p>
-          Moving into a suburban town, Viktor applied at an auto repair shop,
-          where he learned the ins and outs of fixing cars. He became really
-          good at it and enjoyed breathing new mechanical life into broken down
-          vehicles. However, as time went on, the repair shop faced financial
-          troubles, as it became increasingly difficult to come by spare parts
-          as auto makers would only deal them to certified repair partners and
-          certifications were prohibitively expensive. Viktor had to watch
-          business slowly deteriorate, as skilled coworkers kept getting laid
-          off, until the repair shop closed down for good.
-        </p>
-      </template>
-    </TimelineItem>
-    <TimelineItem>
-      <template #icon><HelmetSafetyIcon /></template>
-      <template #headline>Construction Worker</template>
-      <template #content>
-        <p>
-          Having taken a liking in physically demanding work, Viktor took on a
-          job as a construction worker. Hard hat perched atop his head and belt
-          tool slung around his waist, he was always ready to lend a hand (or
-          tail if walls or boulders needed a good teardown). Since he had more
-          than enough strength training from his previous jobs, he was often
-          assigned carrying jobs to clear the site and haul building materials.
-          After work was done, Viktor enjoyed the company of his colleagues over
-          an after-work beer until late in the evenings. On one of these
-          evenings, he got a little reckless with a colleague under the veil of
-          the night and both were caught in the act of fooling around with each
-          other on the construction site. In the following weeks, the colleagues
-          kept their distance from Viktor and the evenings together also
-          dissolved very quickly when he joined them. The continued
-          ostracization ultimately prompted him to look for something new.
-        </p>
-      </template>
-    </TimelineItem>
-    <TimelineItem>
-      <template #icon><IndustryIcon /></template>
-      <template #headline>Welder</template>
-      <template #content>
-        <p>
-          In his job as a welder, Viktor spent his days working shifts in a
-          workshop. In addition to special tools and plasma welders, he also
-          used his powerful tail club to hammer metal parts into shape. He
-          acquired a wide variety of welding techniques to join or repair metal
-          structures. He worked with a wide variety of alloys such as steel,
-          aluminum and titanium. Viktor showed extreme skill in his work with
-          great precision and attention to detail. However, this dedication was
-          a thorn in the side of a jealous colleague who saw Viktor as a rival
-          and schemed against him, sabotaging his work, which ultimately ended
-          in his termination after a customer sued the welding shop for botching
-          the job. Viktor never found out who the culprit was, and the loss of
-          that job still hangs over him.
-        </p>
-      </template>
-    </TimelineItem>
-    <TimelineItem>
-      <template #icon><TruckIcon /></template>
-      <template #headline>Delivery Driver</template>
-      <template #content>
-        <p>
-          When Viktor was strapped for cash, he took on a job in the gig economy
-          as a driver delivering packages for a large online delivery service.
-          His previous physically demanding jobs allowed him to haul even bulky
-          deliveries to their destination with relative ease. If the shipping
-          center managers hadn't been breathing down his neck constantly, he
-          might have held this job even longer. But after one of the managers
-          tried to show him up in front of the whole team, he snapped and broke
-          their leg with his tail club. Of course, he didn't have to report for
-          duty the next day.
-        </p>
-      </template>
-    </TimelineItem>
-    <TimelineItem>
-      <template #icon><BoxesIcon /></template>
-      <template #headline>Docks Werehouse Worker</template>
-      <template #content>
-        <p>
-          Currently Viktor works at the docks in the port town he moved to. His
-          main responsibilities include loading and unloading cargo from ships
-          and transporting it to and from warehousing. The hustle and bustle of
-          the port sometimes gets on his nerves. Especially when the crew of
-          docking ships come ashore again after a long time and make it clear
-          that they don't have much contact with "landlubbers". Viktor doesn't
-          get particularly impressed by this and foul mouths them right back if
-          he gets the impression they're looking for trouble.
-        </p>
       </template>
     </TimelineItem>
   </TimelineList>

src/views/GeneralView.vue

@@ -31,90 +31,41 @@ const toLbs = (kg: number): number => {
   return lbs;
 };
 
-const heads = ["Key", "Value"];
+const heads = ["data.general.heading[0]", "data.general.heading[1]"];
 const data = [
-  ["Full Name", "Viktor Kraastav"],
+  ["data.general.fullName[0]", "data.general.fullName[1]"],
-  ["Date of Birth", dateFormat.format(dob)],
+  ["data.general.dob[0]", dateFormat.format(dob)],
-  ["Sex/Gender", "male ♂️"],
+  ["data.general.gender[0]", "data.general.gender[1]"],
-  ["Height", `${height} cm (${toImperial(height)})`],
+  ["data.general.height[0]", `${height} cm (${toImperial(height)})`],
-  ["Weight", `${weight} kg (${toLbs(weight)} lbs)`],
+  ["data.general.weight[0]", `${weight} kg (${toLbs(weight)} lbs)`],
 ];
 
-const sexHeads = ["Key", "Value"];
+const sexHeads = ["data.sexuality.heading[0]", "data.sexuality.heading[1]"];
 const sexData = [
-  ["Sexuality", "Gay"],
+  ["data.sexuality.identifiesAs[0]", "data.sexuality.identifiesAs[1]"],
-  ["Preferred position", "Bottom"],
+  ["data.sexuality.preferredRole[0]", "data.sexuality.preferredRole[1]"],
 ];
 </script>
 
 <template>
   <section>
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
   </section>
 
   <DataTable :headings="heads" :data="data"></DataTable>
 
   <section>
-    <h2>Personality</h2>
+    <h2>{{ $t("general.personality.heading") }}</h2>
-    <p>
+    <p v-for="p in $tm('general.personality.paragraphs')">{{ p }}</p>
-      Viktor is not a man of many words, his manner of expression is simple and
-      direct, and sometimes a little blunt. This brash manner doesn't go down
-      well with everyone and regularly gets him into trouble.
-    </p>
-
-    <p>
-      At the same time, this is also an expression of his exuberant
-      self-confidence. He won't take any crap from anyone and doesn't hesitate
-      to give someone a piece of his mind. If that results in fisticuffs, he'll
-      deal with them.
-    </p>
-
-    <p>
-      All this may make him look like a really unpleasant fellow, but he greatly
-      appreciates the company of people he trusts. He is very selective about
-      whom he counts among this group of people, though. He appreciates personal
-      contact, preferably over a few beers at his favorite bar.
-    </p>
-
-    <p>
-      He likes things to be simple, which is why he is not a big fan of
-      high-tech. He does have a smartphone, but he hates using it as much as he
-      dislikes the fact he's dependent on owning one.
-    </p>
   </section>
 
   <section>
-    <h2>Sexuality</h2>
+    <h2>{{ $t("general.sexuality.heading") }}</h2>
   </section>
 
   <DataTable :headings="sexHeads" :data="sexData"></DataTable>
 
   <section>
-    <p>
+    <p v-for="p in $tm('general.sexuality.paragraphs')">{{ p }}</p>
-      As a teenager, Viktor noticed that he felt a bit differently about the
-      boys in his class. Especially in gym class, his eyes tended to linger
-      longer on his classmates as they rough-housed in the locker room, as
-      pubescent boys do. However, he could never quite come to terms with the
-      idea that he might be a little different from his friends, who were all
-      beginning to take an interest in girls, unlike him, who was more
-      interested in his buddies.
-    </p>
-
-    <p>
-      As he got older, he slowly learned to come to terms with the fact that he
-      saw more in his buddies than just friends. However, he still kept a low
-      profile.
-    </p>
-
-    <p>
-      Until one evening at a party, when one of his friends complained that he
-      wouldn't get any from his girlfriend. Both of them were already well
-      intoxicated and Viktor made him the slurred proposal that he would help
-      him out as his bro. At first his buddy was irritated by the offer, but
-      eventually agreed. The two snuck into a bedroom at the host's place, where
-      Viktor would let his buddy unload all the pent-up pressure inside him. He
-      wouldn't remember much of the party, but what he didn't forget how good it
-      felt to give himself to another man.
-    </p>
   </section>
 </template>

src/views/HomeView.vue

@@ -4,14 +4,13 @@ import WelcomeHeader from "@/components/WelcomeHeader.vue";
 
 <template>
   <WelcomeHeader>
-    <template #main>Viktor Kraastav</template>
+    <template #main>{{ $t("welcomeHeader.mainTitle") }}</template>
-    <template #sub>Character Reference Page</template>
+    <template #sub>{{ $t("welcomeHeader.subTitle") }}</template>
   </WelcomeHeader>
 
   <section>
-    <h3>Welcome to Viktor's Ref Page</h3>
+    <h3>{{ $t("home.heading") }}</h3>
 
-    <p>Here you can learn all about the ankylosaurus named Viktor.</p>
+    <p v-for="p in $tm('home.paragraphs')">{{ p }}</p>
-    <p>Pick an item from the navigation to dive in!</p>
   </section>
 </template>