internalization the-other-half-done

Website/pages/docs/fetching.vue

@@ -12,7 +12,7 @@
       </a>
     </div>
 
-    <h2 class="mt-4">{{ $vuetify.lang.t("$vuetify.api.fetching.title2") }}</h2>
+    <h3 class="mt-6">{{ $vuetify.lang.t("$vuetify.api.fetching.title2") }}</h3>
     <div class="ma-2">
       {{ $vuetify.lang.t("$vuetify.api.fetching.url") }}
       <a

Website/pages/donate.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <h1 class="title-text">Donate</h1>
+    <h1 class="title-text">
+      {{ $vuetify.lang.t("$vuetify.donate.name") }}
+    </h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
-      You can support our efforts to keep the internet free with a donation!
+      {{ $vuetify.lang.t("$vuetify.donate.subtitle") }}
     </p>
     <v-btn class="mainAltButton mb-2" :href="patreonLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-patreon</v-icon>

Website/pages/faq.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="width-constraint">
-    <h1 class="title-text">Frequently Asked Questions</h1>
+    <h1 class="title-text">
+      {{ $vuetify.lang.t("$vuetify.faq.title") }}
+    </h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
-      Still have questions? Feel free to join our Discord!
+      {{ $vuetify.lang.t("$vuetify.faq.subtitle") }}
     </p>
 
     <v-expansion-panels>
-      <v-expansion-panel v-for="(item, i) in items" :key="i">
+      <v-expansion-panel v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i">
         <v-expansion-panel-header>
-          {{ item.question }}
+          {{ $vuetify.lang.t(`$vuetify.faq.bullet${i}`) }}
         </v-expansion-panel-header>
         <v-expansion-panel-content class="text-left">
           <hr style="border-color: #444" />
           <br />
-          <span v-html="item.answer" />
+          <span v-html="$vuetify.lang.t(`$vuetify.faq.bullet${i}text`)" />
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -31,50 +33,5 @@ export default {
       ? "swoop-left"
       : "swoop-right";
   },
-  data: () => ({
-    items: [
-      {
-        question: "Where does the extension get its data?",
-        answer:
-          "A combination of archived data from before the official YouTube dislike API shut down, and extrapolated extension user behavior.",
-      },
-      {
-        question: "Why isn't the dislike count updating?",
-        answer:
-          "Right now video dislikes are cached and they aren't updated very frequently. It varies depending on a video's popularity but can take anywhere between a few hours and a few days to update.",
-      },
-      {
-        question: "Why is the dislike count on my videos inaccurate?",
-        answer:
-          "Extrapolated data tends to get better with the increase in diversity and the quantity of voters. \nTo ensure and increase the accuracy of the extrapolated vote data for your videos, you can encourage your viewers to use this extension (or any app that submits votes to returnyoutubedislikeapi.com) ",
-      },
-      {
-        question: "How does this work?",
-        answer:
-          "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API. The extension then displays the dislike count and ratio on the page. If you like or dislike a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
-      },
-      {
-        question: "Can I share my dislike count with you?",
-
-        answer:
-          "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",
-      },
-      {
-        question: "What data do you collect and how is it treated?",
-        answer:
-          "The extension only collects data that is strictly necessary for it to function properly, such as IP address or ID of the video you're watching. None of your data will ever be sold to 3rd parties. If you would like to know more about how we handle security and privacy check out our <a href='https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/SECURITY-FAQ.md'>security FAQ</a>.",
-      },
-      {
-        question: "How does the API/Backend work?",
-        answer:
-          "The backend is using archived data from when the youtube api was still returning the dislike count, extension users like/discount count and extrapolation. In the near future we will be allowing content creators to submit their dislike count easily and safely and we will be adding ArchiveTeam's archived data (4.56 billion videos) into our current database. <a href='https://www.youtube.com/watch?v=GSmmtv-0yYQ'>You can also view a video on the topic.</a>",
-      },
-      {
-        question: "Why does the dislike count show 'DISLIKES DISABLED'?",
-        answer:
-          "At the time of writing we aren't showing dislikes for videos that disabled their likes and dislikes count. The extension displays 'DISLIKES DISABLED' for these videos. We will be showing dislikes on all videos soon, this is just a temporary workaround so people don't think the extension is broken (which isn't working well). Sometimes a recently uploaded video might show 'DISLIKES DISABLED' even if the creator hasn't disabled it, this is due to how we are detecting if dislikes are disabled, it should go away in a few hours or by liking or disliking the video and refreshing the page (hopefully).",
-      },
-    ],
-  }),
 };
 </script>

Website/pages/help.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="width-constraint">
-    <h1 class="title-text pt-12">Troubleshooting</h1>
+    <h1 class="title-text pt-12">
+      {{ $vuetify.lang.t("$vuetify.help.title") }}
+    </h1>
     <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
-        Make sure you have latest version of extension installed,
+        {{ $vuetify.lang.t("$vuetify.help.bullet1") }}
         <code style="color: #eee">
-          <b>{{ version }}</b></code
-        >
-        right now
+          <b>{{ version }}</b>
+        </code>
+        {{ $vuetify.lang.t("$vuetify.help.bullet11") }}
       </li>
       <li>
-        Try removing extension and installing it again, then restarting the
-        browser (all active windows, not just one tab).
+        {{ $vuetify.lang.t("$vuetify.help.bullet2") }}
       </li>
       <li>
-        Make sure that this link opens:
+        {{ $vuetify.lang.t("$vuetify.help.bullet3") }}
         <a
           class="px-2 py-1"
           style="background: #222; border-radius: 0.25rem"
@@ -23,7 +24,8 @@
           https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14
         </a>
         , <br />
-        you should see plain text: <br />
+        {{ $vuetify.lang.t("$vuetify.help.bullet31") }}
+        <br />
         <span style="color: #eee">
           {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
           "likes":2907, "dislikes":215, "rating":4.725641025641026,
@@ -31,8 +33,9 @@
         </span>
       </li>
       <li>
-        If nothing of above helps - report your problem in
-        <code>#bugs-and-problems</code> in our
+        {{ $vuetify.lang.t("$vuetify.help.bullet4") }}
+        <code>#bugs-and-problems</code>
+        {{ $vuetify.lang.t("$vuetify.help.bullet41") }}
         <v-btn
           class="mainAltButton"
           style="
@@ -50,8 +53,7 @@
         </v-btn>
         <ol type="a">
           <li>
-            Tell us your <b>Operating System</b>, <b>Browser Name</b> and
-            <b>Browser Version</b>.
+            {{ $vuetify.lang.t("$vuetify.help.bullet4a") }}
             <v-btn
               class="mainAltButton"
               style="
@@ -74,8 +76,10 @@
           </li>
 
           <li style="position: relative; width: 100%">
-            Take screenshot of page with problem (i.e. youtube video page) with
-            console open (press <code>F12</code>) - example screenshot below.
+            {{ $vuetify.lang.t("$vuetify.help.bullet4b") }}
+            <code>F12</code>
+            {{ $vuetify.lang.t("$vuetify.help.bullet4b1") }}
+
             <img
               loading="eager"
               width="100%"
@@ -86,14 +90,15 @@
           </li>
 
           <li>
-            Take screenshot of extensions page of your browser with extension
-            installed. <br />
-            To see extensions put this into address bar:
+            {{ $vuetify.lang.t("$vuetify.help.bullet4c") }}
             <br />
-            <code>about:addons</code> for Firefox
+            {{ $vuetify.lang.t("$vuetify.help.bullet4c1") }}
             <br />
-            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera,
-            Vivaldi
+            <code>about:addons</code>
+            {{ $vuetify.lang.t("$vuetify.help.firefox") }}
+            <br />
+            <code>chrome://extensions</code>
+            {{ $vuetify.lang.t("$vuetify.help.chrome") }}
           </li>
         </ol>
       </li>

Website/pages/links.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="pt-12">
-    <h1 class="title-text">Project Links</h1>
+    <h1 class="title-text">
+      {{ $vuetify.lang.t("$vuetify.links.title") }}
+    </h1>
 
-    <div style="color: #999">
-      <p style="margin-top: 0.5rem; margin-bottom: 1rem">
-        Links to the project and its developers
-      </p>
-    </div>
+    <p style="color: #9999; margin-top: 0.5rem; margin-bottom: 1rem">
+      {{ $vuetify.lang.t("$vuetify.links.subtitle") }}
+    </p>
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-github</v-icon>
@@ -18,7 +18,9 @@
       Discord
     </v-btn>
 
-    <h1 style="margin-top: 1em">Contact Me</h1>
+    <h1 style="margin-top: 1em">
+      {{ $vuetify.lang.t("$vuetify.links.contact") }}
+    </h1>
 
     <v-btn class="mainAltButton" :href="emailLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-email</v-icon>
@@ -38,7 +40,8 @@
     </p>
     <!-- Translators -->
     <div style="color: #555; width: 250px">
-      Translators: <br />
+      {{ $vuetify.lang.t("$vuetify.links.translators") }}
+      <br />
       <div
         v-for="translator in translators"
         :key="translator.tag"