internalization half-done

2026-10-28 07:40:27 +01:00 · 2022-04-29 13:30:06 -04:00
parent 4b5482be18
commit 28369db138
13 changed files with 223 additions and 185 deletions
@@ -15,32 +15,34 @@
      "
    >
      <v-list-item
-        v-for="(item, i) in links"
+        v-for="(link, i) in links"
        :key="i"
-        :to="item.to"
+        :to="link.to"
        router
        class="mb-4"
        color="primary"
        style="overflow: hidden !important; border-radius: 0.75rem"
      >
        <v-list-item-title style="text-align: right">
-          <v-list-item-title v-text="item.text" />
+          <v-list-item-title
+            v-text="$vuetify.lang.t(`$vuetify.api.${link.name}.title`)"
+          />
        </v-list-item-title>
        <v-list-item-icon>
-          <v-icon v-text="item.icon" />
+          <v-icon v-text="link.icon" />
        </v-list-item-icon>
      </v-list-item>
    </v-list>

    <!-- docs content -->
    <v-card
-      class="text-left pa-8"
+      class="text-left pa-6"
      style="
        flex-grow: 2;
        height: max-content;
        max-width: 90vw !important;
        background-color: #222;
-        border-radius: 1rem;
+        border-radius: 0.75rem;
      "
    >
      <NuxtChild />
@@ -64,22 +66,22 @@ export default {
      //---   Links To Generate Above    ---//
      links: [
        {
-          text: "Usage Rights",
+          name: "rights",
          icon: "mdi-book-open-variant",
          to: "/docs/usage-rights",
        },
        {
-          text: "URL Information",
+          name: "url",
          icon: "mdi-web",
          to: "/docs/url",
        },
        {
-          text: "Available Endpoints",
+          name: "endpoints",
          icon: "mdi-transit-connection-variant",
          to: "/docs/endpoints",
        },
        {
-          text: "Basic Fetching Tutorial",
+          name: "fetching",
          icon: "mdi-school",
          to: "/docs/fetching",
        },
@@ -1,8 +1,12 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Available Endpoints</h1>
-    List of available endpoints is available here:<br />
-    <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.endpoints.title") }}
+    </h2>
+    <div class="mt-4">
+      {{ $vuetify.lang.t("$vuetify.api.endpoints.subtitle") }}
+      <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+    </div>
  </div>
 </template>

@@ -1,38 +1,46 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Basic Fetching Tutorial</h1>
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.title") }}
+    </h2>

-    <span>Example to get votes of a given YouTube video ID:</span>
-    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
-      >kxOuG8jMIgI</a
-    >
+    <div class="ma-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.subtitle") }}

-    <h2>Example Request:</h2>
-    <span>Request URL:</span>
-    <a
-      :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-      target="_blank"
-      v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    />
-    <br />
-    <span>
-      Request Method:
+      <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">
+        kxOuG8jMIgI
+      </a>
+    </div>
+
+    <h2 class="mt-4">{{ $vuetify.lang.t("$vuetify.api.fetching.title2") }}</h2>
+    <div class="ma-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.url") }}
+      <a
+        :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+        target="_blank"
+        v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+      />
+      <br />
+      {{ $vuetify.lang.t("$vuetify.api.fetching.method") }}
      <a
        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
        target="_blank"
-        >HTTP/GET</a
      >
-    </span>
-    <br />
-    <span>Headers:</span>
-    <br />
+        HTTP/GET
+      </a>
+    </div>
+    <div class="mt-4 ml-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.headers") }}
+    </div>
    <div class="code pa-4">
      Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
      Pragma: no-cache<br />
      Cache-Control: no-cache<br />
      Connection: keep-alive
    </div>
-    <span>Response:</span><br />
+    <div class="mt-4 ml-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.response") }}
+    </div>
    <div class="code pa-4">
      {
      <br />
@@ -46,13 +54,10 @@
      }
    </div>
    <br />
-    <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
-      ><br />
-      <span
-        >An incorrectly formatted YouTube ID will return 400 "Bad
-        Request".</span
-      >
+    <v-alert border="left" color="orange" text type="info" class="mb-0">
+      <span>{{ $vuetify.lang.t("$vuetify.api.fetching.error1") }}</span>
+      <br />
+      <span>{{ $vuetify.lang.t("$vuetify.api.fetching.error2") }}</span>
    </v-alert>

    <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
@@ -1,8 +1,6 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1>
-      Welcome to the <span class="primary--text">official RYD docs</span>!
-    </h1>
-    To get started, select a section from the menu.
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">{{ $vuetify.lang.t("$vuetify.api.title") }}!</h2>
+    <div class="mt-4">{{ $vuetify.lang.t("$vuetify.api.subtitle") }}</div>
  </div>
 </template>
@@ -1,8 +1,12 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">URL Information</h1>
-    The API is accessible over the following base URL:<br />
-    <a :href="apiUrl" target="_blank" v-text="apiUrl" />
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.url.title") }}
+    </h2>
+    <div class="mt-4">
+      {{ $vuetify.lang.t("$vuetify.api.url.subtitle") }}
+      <a :href="apiUrl" target="_blank" v-text="apiUrl" />
+    </div>
  </div>
 </template>

@@ -1,30 +1,20 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Usage Rights</h1>
-    <p>
-      Third party use of this open API is allowed with the following
-      restrictions:
-    </p>
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.rights.title") }}
+    </h2>
+    <div class="my-4">
+      {{ $vuetify.lang.t("$vuetify.api.rights.subtitle") }}
+    </div>
    <ul>
-      <li>
-        <b>Attribution:</b> This project should be clearly attributed with
-        either a link to this repo or a link to returnyoutubedislike.com.
+      <li class="my-4">
+        <b>{{ $vuetify.lang.t("$vuetify.api.rights.bullet1") }}</b>
+        {{ $vuetify.lang.t("$vuetify.api.rights.bullet1text") }}
      </li>
-      <li>
-        <b>Rate Limiting:</b> There are per client rate limits in place of 100
-        per minute and 10'000 per day. This will return a 429 status code
-        indicating that your application should back off.
+      <li class="my-4">
+        <b>{{ $vuetify.lang.t("$vuetify.api.rights.bullet2") }}</b>
+        {{ $vuetify.lang.t("$vuetify.api.rights.bullet2text") }}
      </li>
    </ul>
  </div>
 </template>
-
-<style scoped>
-li {
-  margin-top: 0.5em;
-}
-
-b {
-  font-weight: 900 !important;
-}
-</style>
@@ -25,12 +25,12 @@
        />
      </svg>

-      <h1 class="title-text">Return YouTube Dislike</h1>
-      <div class="mb-4" style="color: #999">
-        <p style="margin-top: 0">
-          Browser extension and an API that shows you dislikes on Youtube
-        </p>
-      </div>
+      <h1 class="title-text">
+        {{ $vuetify.lang.t("$vuetify.home.title") }}
+      </h1>
+      <p class="mb-4" style="color: #999; margin-top: 0">
+        {{ $vuetify.lang.t("$vuetify.home.subtitle") }}
+      </p>

      <v-btn
        :to="installLink"
@@ -38,7 +38,7 @@
        style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em"
      >
        <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon>
-        Install
+        {{ $vuetify.lang.t("$vuetify.home.install") }}
      </v-btn>

      <br />
@@ -63,14 +63,16 @@
    <div id="support-ukraine" class="d-flex flex-column items-center py-2">
      <h3 class="mb-2">
        <v-img src="/ukraine-flag-xs.webp" width="42px" height="28px"></v-img>
-        <a href="https://helpukrainewin.org/">Support Ukraine</a>
+        <a href="https://helpukrainewin.org/">
+          {{ $vuetify.lang.t("$vuetify.home.ukraine") }}
+        </a>
      </h3>
    </div>

    <div id="biggest-supporters" class="d-flex flex-column items-center py-8">
      <h3 class="mb-4">
        <v-icon class="mb-2">mdi-heart</v-icon>
-        Sponsors
+        {{ $vuetify.lang.t("$vuetify.home.sponsors") }}
      </h3>
      <v-row class="justify-center mx-auto">
        <p v-for="sponsor in sponsors" :key="sponsor.name" class="sponsor">
@@ -2,12 +2,9 @@
  <div>
    <h1 class="title-text">{{ $vuetify.lang.t("$vuetify.install.title") }}</h1>

-    <div style="color: #999">
-      <p style="margin-bottom: 1rem">
-        Available for Firefox and all Chromium browsers
-        (Chrome/Edge/Opera/Brave).
-      </p>
-    </div>
+    <p style="color: #999; margin-bottom: 1rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle") }}
+    </p>

    <v-btn class="mainAltButton mb-2" :href="firefoxLink" target="_blank">
      <v-icon style="margin-right: 0.5em">mdi-firefox</v-icon>
@@ -46,12 +43,13 @@
      Brave
    </v-btn>

-    <h3 style="margin-top: 3em; margin-bottom: 0">Other Platforms</h3>
-    <div style="color: #999">
-      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
-        If your browser is not yet supported, try this UserScript.
-      </p>
-    </div>
+    <!-- Userscript -->
+    <h3 style="margin-top: 3em; margin-bottom: 0">
+      {{ $vuetify.lang.t("$vuetify.install.title2") }}
+    </h3>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 0.5rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle2") }}
+    </p>

    <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
      <v-icon style="margin-right: 0.5em">mdi-script-text-outline</v-icon>
@@ -59,23 +57,36 @@
      <div style="font-size: 0.55rem">(Tampermonkey)</div>
    </v-btn>

-    <h3 style="margin-top: 3em">Third Party Implementations</h3>
-    <div style="color: #999">
-      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
-        No liability on our side, use at your own risk.
-      </p>
-    </div>
+    <!-- 3rd party clients -->
+    <h3 style="margin-top: 3em">
+      {{ $vuetify.lang.t("$vuetify.install.title3") }}
+    </h3>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 0.5rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle3") }}
+    </p>
    <v-btn class="mainAltButton" :href="androidNewPipe" target="_blank">
      <v-icon style="margin-right: 0.5em">mdi-android</v-icon>
-      Android (NewPipe fork)
+      Android &nbsp; <span style="font-size: 0.55rem">(NewPipe fork)</span>
    </v-btn>
-    <v-btn class="mainAltButton" :href="androidVueTube" target="_blank">
-      <v-icon style="margin-right: 0.5em">mdi-android</v-icon>
-      Android (VueTube)
+    <v-btn
+      class="mainAltButton"
+      style="color: #999"
+      :href="androidVueTube"
+      target="_blank"
+    >
+      <v-icon class="white--text">mdi-android</v-icon>
+      <v-icon>mdi-apple</v-icon>
+      <v-icon>mdi-linux</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-microsoft-windows</v-icon>
+      <div style="font-size: 0.75rem">
+        VueTube (WIP) <br />
+        <span style="font-size: 0.55rem">pre-alpha</span>
+      </div>
+      <v-icon style="margin-left: 0.5rem">mdi-hammer-wrench</v-icon>
    </v-btn>
    <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
      <v-icon style="margin-right: 0.5em">mdi-apple</v-icon>
-      iOS (Jailbroken)
+      iOS &nbsp; <span style="font-size: 0.55rem">(Jailbroken)</span>
    </v-btn>
  </div>
 </template>