Merge pull request #376 from Frontesque/main

Update Documentation & Add Debug Page

9 files changed, 289 insertions, 4 deletions

diff --git a/Website/pages/debug.vue b/Website/pages/debug.vue
new file mode 100644
index 0000000..fbdfc50
--- /dev/null
+++ b/Website/pages/debug.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <!--   Top Section // "Sections" Card   -->
+    <v-card max-width="600px" class="rounded-lg">
+      <v-card-title style="padding-bottom: 0">Debug Information</v-card-title>
+      <v-card-text style="text-align: left">
+        <!--   Gather Browser Information   -->
+        <span><b>Browser Information:</b></span
+        ><br />
+        <span>Browser: {{ device._parsed.name }}</span
+        ><br />
+        <span>Browser Vendor: {{ device._parsed.vendor }}</span
+        ><br />
+        <span>Version: {{ device._parsed.version }}</span
+        ><br />
+        <span>Operating System: {{ device._parsed.os }}</span
+        ><br />
+        <span>Operating System Version: {{ device._parsed.os_version }}</span
+        ><br />
+        <span>Device Type: {{ device._parsed.category }}</span
+        ><br /><br />
+        <!--   Gather Extension Information   -->
+        <span><b>Installed Extension Information:</b></span
+        ><br />
+        <span
+          >Extension Version:
+          <span id="extension-version">Waiting For Extension...</span></span
+        ><br />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn @click="copy()">
+          <v-icon small style="margin-right: 0.25em">mdi-content-copy</v-icon
+          >Copy
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      device: this.$ua,
+    };
+  },
+
+  methods: {
+    copy() {
+      const toCopy = `\`\`\`
+Browser Information:
+Browser: ${this.device._parsed.name}
+Browser Vendor: ${this.device._parsed.vendor}
+Version: ${this.device._parsed.version}
+Operating System: ${this.device._parsed.os}
+Operating System Version: ${this.device._parsed.os_version}
+Device Type: ${this.device._parsed.category}
+
+Installed Extension Information:
+Extension Version: ${document.getElementById("extension-version").innerHTML}
+\`\`\``;
+
+      navigator.clipboard.writeText(toCopy);
+    },
+  },
+};
+</script>
diff --git a/Website/pages/documentation.vue b/Website/pages/documentation.vue
new file mode 100644
index 0000000..ff21a68
--- /dev/null
+++ b/Website/pages/documentation.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <!--   Top Section // "Sections" Card   -->
+    <v-card max-width="600px" class="rounded-lg">
+      <v-card-title style="padding-bottom: 0">Sections</v-card-title>
+      <v-list>
+        <!--   Dynamically Generate Links From Below   -->
+        <v-list-item v-for="(item, i) in links" :key="i" router :to="item.to">
+          <v-list-item-icon>
+            <v-icon v-text="item.icon" />
+          </v-list-item-icon>
+          <v-list-item-title style="text-align: left">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+
+    <!--   Child Pages // Card   -->
+    <v-card
+      max-width="600px"
+      class="rounded-lg"
+      style="margin: 1em; padding: 0.75em; text-align: left"
+    >
+      <NuxtChild />
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //---   Links To Generate Above    ---//
+      links: [
+        {
+          text: "Usage Rights",
+          icon: "mdi-book-open-variant",
+          to: "/documentation/usage-rights",
+        },
+        {
+          text: "URL Information",
+          icon: "mdi-web",
+          to: "/documentation/url",
+        },
+        {
+          text: "Available Endpoints",
+          icon: "mdi-transit-connection-variant",
+          to: "/documentation/endpoints",
+        },
+        {
+          text: "Basic Fetching Tutorial",
+          icon: "mdi-school",
+          to: "/documentation/fetching",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/Website/pages/documentation/endpoints.vue b/Website/pages/documentation/endpoints.vue
new file mode 100644
index 0000000..ef94c10
--- /dev/null
+++ b/Website/pages/documentation/endpoints.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1 class="primary--text">Available Endpoints</h1>
+    List of available endpoints is available here:<br />
+    <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+  </div>
+</template>
+
+<script>
+let apiUrl = process.env.apiUrl;
+export default {
+  data() {
+    return {
+      apiUrl: apiUrl,
+      endpointUrl: apiUrl + "/swagger/index.html",
+    };
+  },
+};
+</script>
diff --git a/Website/pages/documentation/fetching.vue b/Website/pages/documentation/fetching.vue
new file mode 100644
index 0000000..651f2b8
--- /dev/null
+++ b/Website/pages/documentation/fetching.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1 class="primary--text">Basic Fetching Tutorial</h1>
+
+    <span>Example to get votes of a given YouTube video ID:</span>
+    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
+      >kxOuG8jMIgI</a
+    ><br /><br />
+
+    <h2>Example Request:</h2>
+    <span><b>Request URL:</b></span>
+    <a
+      :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+      target="_blank"
+      v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+    /><br />
+    <span
+      ><b>Request Method:</b>
+      <a
+        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
+        target="_blank"
+        >HTTP/GET</a
+      ></span
+    ><br />
+    <span><b>Headers:</b></span
+    ><br />
+    <code class="code">
+      Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
+      Pragma: no-cache<br />
+      Cache-Control: no-cache<br />
+      Connection: keep-alive </code
+    ><br />
+    <span><b>Response:</b></span
+    ><br />
+    <div class="code">
+      <code style="background-color: rgba(0, 0, 0, 0)">
+        {<br />
+        "id": "kxOuG8jMIgI",<br />
+        "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
+        "likes": 27326,<br />
+        "dislikes": 498153,<br />
+        "rating": 1.212014408444885,<br />
+        "viewCount": 3149885,<br />
+        "deleted": false<br />
+        }
+      </code>
+    </div>
+    <br /><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>
+
+    <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+  </div>
+</template>
+
+<style scoped>
+.code {
+  width: 100%;
+  background: #353535;
+  border-radius: 3px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      apiUrl: process.env.apiUrl,
+    };
+  },
+};
+</script>
diff --git a/Website/pages/documentation/index.vue b/Website/pages/documentation/index.vue
new file mode 100644
index 0000000..ad3cd1d
--- /dev/null
+++ b/Website/pages/documentation/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <h1>
+      Welcome to the <span class="primary--text">official RYD docs</span>!
+    </h1>
+    <p>To get started, select a section.</p>
+  </div>
+</template>
diff --git a/Website/pages/documentation/url.vue b/Website/pages/documentation/url.vue
new file mode 100644
index 0000000..e95f542
--- /dev/null
+++ b/Website/pages/documentation/url.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      apiUrl: process.env.apiUrl,
+    };
+  },
+};
+</script>
diff --git a/Website/pages/documentation/usage-rights.vue b/Website/pages/documentation/usage-rights.vue
new file mode 100644
index 0000000..09bf581
--- /dev/null
+++ b/Website/pages/documentation/usage-rights.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1 class="primary--text">Usage Rights</h1>
+    <p>
+      Third party use of this open API is allowed with the following
+      restrictions:
+    </p>
+    <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>
+      <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>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+li {
+  margin-top: 0.5em;
+}
+
+b {
+  font-weight: 900 !important;
+}
+</style>
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 9ce4693..9a75b79 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -49,8 +49,7 @@ export default {
           "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 dislike or like a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-        question:
-        "Can I share my dislke count with you?",
+        question: "Can I share my dislke 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. ",
       },
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index 4a2f118..46810c0 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -97,8 +97,14 @@ export default {
         { name: "Piepacker", link: "https://piepacker.com/" },
         { name: "nodetube", link: "https://github.com/mayeaux/nodetube" },
         { name: "trig404" },
-        { name: "Peter33", link: "https://www.youtube.com/watch?v=G5kzUpWAusI" },
-        { name: "Seed4.Me VPN", link: "https://www.seed4.me/users/register?gift=ReturnYoutubeDislike" },
+        {
+          name: "Peter33",
+          link: "https://www.youtube.com/watch?v=G5kzUpWAusI",
+        },
+        {
+          name: "Seed4.Me VPN",
+          link: "https://www.seed4.me/users/register?gift=ReturnYoutubeDislike",
+        },
       ],
     };
   },