Merge pull request #376 from Frontesque/main

Update Documentation & Add Debug Page

.gitignore

@@ -37,3 +37,4 @@ Extensions/combined/bundled-content-script.js
 # Dist Files
 Extensions/combined/dist/*
 package-lock.json
+Website/package-lock.json

Extensions/combined/debug.js

@@ -0,0 +1,8 @@
+//---   Get Extension Information   ---//
+const extension = chrome.runtime.getManifest();
+
+//---   Get Debug Elements   ---//
+const ver = document.getElementById("extension-version");
+
+//---   Set Debug Elements   ---//
+ver.innerHTML = extension.version;

Extensions/combined/manifest-chrome.json

@@ -27,6 +27,10 @@
       "exclude_matches": ["*://*.music.youtube.com/*"],
       "js": ["bundled-content-script.js"],
       "css": ["content-style.css"]
+    },
+    {
+      "matches": ["*://*.returnyoutubedislike.com/debug","http://localhost/debug"],
+      "js": ["debug.js"]
     }
   ],
   "externally_connectable": {

Extensions/combined/manifest-firefox.json

@@ -21,6 +21,11 @@
       "run_at": "document_idle",
       "css": ["content-style.css"],
       "js": ["bundled-content-script.js"]
+    },
+    {
+      "matches": ["*://*.returnyoutubedislike.com/debug","http://localhost/debug"],
+      "run_at": "document_idle",
+      "js": ["debug.js"]
     }
   ]
 }

README.md

@@ -36,35 +36,8 @@ You can learn more at our website at: [returnyoutubedislike.com](https://www.ret
 
 ## API documentation
 
-Third party use of this open API is allowed with the following restrictions:
-
-- **Attribution**: This project should be clearly attributed with either a link to this repo or a link to [returnyoutubedislike.com](https://returnyoutubedislike.com/).
-- **Rate Limiting**: 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.
-
-The API is accessible over the following base URL:  
-https://returnyoutubedislikeapi.com  
-
-List of available endpoints is available here:  
-https://returnyoutubedislikeapi.com/swagger/index.html
-
-### Get votes
-Example to get votes of a given YouTube video ID:  
-`/votes?videoId=kxOuG8jMIgI`
-
-```json
-{
-    "id": "kxOuG8jMIgI",
-    "dateCreated": "2021-12-20T12:25:54.418014Z",
-    "likes": 27326,
-    "dislikes": 498153,
-    "rating": 1.212014408444885,
-    "viewCount": 3149885,
-    "deleted": false
-}
-```
-
-None existing YouTube ID will return status code *404* "Not Found".  
-Wrong formed YouTube ID will return *400* "Bad Request".
+You can view all documentation on our website.
+[https://returnyoutubedislike.com/documentation/](https://returnyoutubedislike.com/documentation/)
 
 ## HELP WANTED
 

Website/layouts/default.vue

@@ -31,26 +31,12 @@
 export default {
   data: () => ({
     links: [
-      {
-        name: "Home",
-        path: "/",
-      },
-      {
-        name: "Install",
-        path: "/install",
-      },
-      {
-        name: "FAQ",
-        path: "/faq",
-      },
-      {
-        name: "Donate",
-        path: "/donate",
-      },
-      {
-        name: "Links",
-        path: "/links",
-      },
+      { name: "Home", path: "/" },
+      { name: "Install", path: "/install" },
+      { name: "FAQ", path: "/faq" },
+      { name: "Donate", path: "/donate" },
+      { name: "Links", path: "/links" },
+      { name: "API", path: "/documentation" },
     ],
   }),
 };

Website/nuxt.config.js

@@ -27,12 +27,18 @@ export default {
     ],
   },
 
+  env: {
+    apiUrl: "https://returnyoutubedislikeapi.com",
+  },
+
+  //server: { host: '0.0.0.0', port: 80 }, //LINE FOR DEBUGGING ONLY
+
   target: "static",
   css: [],
   plugins: [],
   components: true,
   buildModules: ["@nuxtjs/vuetify"],
-  modules: [],
+  modules: ["nuxt-user-agent"],
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
@@ -52,7 +58,7 @@ export default {
       },
     },
   },
-
+  /*
   build: {
     extend(config, ctx) {
       // Run ESLint on save (dev-only)
@@ -65,5 +71,6 @@ export default {
         });
       }
     },
-  },
+  }
+*/
 };

Website/package-lock.json

@@ -10,9 +10,11 @@
       "dependencies": {
         "core-js": "^3.15.1",
         "nuxt": "^2.15.7",
+        "nuxt-user-agent": "^1.2.2",
         "vuetify": "^2.5.5"
       },
       "devDependencies": {
+        "@nuxtjs/device": "^2.1.0",
         "@nuxtjs/vuetify": "^1.12.1",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",
@@ -2643,6 +2645,21 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@nuxtjs/device": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
+      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
+      "dev": true,
+      "dependencies": {
+        "defu": "^3.2.2"
+      }
+    },
+    "node_modules/@nuxtjs/device/node_modules/defu": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
+      "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
+      "dev": true
+    },
     "node_modules/@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -8914,6 +8931,14 @@
         "nuxt": "bin/nuxt.js"
       }
     },
+    "node_modules/nuxt-user-agent": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/nuxt-user-agent/-/nuxt-user-agent-1.2.2.tgz",
+      "integrity": "sha512-Z9d+r1/PzJAvrr4rX70IWvRyI3qw3RukAGrRZPZ9WeByuCWmVKiW8G1AhdkUOyrDrVoBUC59iLqIVkop/NjSuQ==",
+      "dependencies": {
+        "woothee": "^1.8.1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -14548,6 +14573,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/woothee": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/woothee/-/woothee-1.11.1.tgz",
+      "integrity": "sha512-KdArM3MsNa5tlSBSL29w9ouy9MXZoFPeUdPVnL4QZH3iyV8HsqnwbWw2YLiXEx2wAh0bM55dnl0+qDE6KHBlhQ=="
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -16628,6 +16658,23 @@
         }
       }
     },
+    "@nuxtjs/device": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
+      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
+      "dev": true,
+      "requires": {
+        "defu": "^3.2.2"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
+          "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
+          "dev": true
+        }
+      }
+    },
     "@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -21504,6 +21551,14 @@
         "@nuxt/webpack": "2.15.8"
       }
     },
+    "nuxt-user-agent": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/nuxt-user-agent/-/nuxt-user-agent-1.2.2.tgz",
+      "integrity": "sha512-Z9d+r1/PzJAvrr4rX70IWvRyI3qw3RukAGrRZPZ9WeByuCWmVKiW8G1AhdkUOyrDrVoBUC59iLqIVkop/NjSuQ==",
+      "requires": {
+        "woothee": "^1.8.1"
+      }
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -25917,6 +25972,11 @@
         "string-width": "^4.0.0"
       }
     },
+    "woothee": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/woothee/-/woothee-1.11.1.tgz",
+      "integrity": "sha512-KdArM3MsNa5tlSBSL29w9ouy9MXZoFPeUdPVnL4QZH3iyV8HsqnwbWw2YLiXEx2wAh0bM55dnl0+qDE6KHBlhQ=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

Website/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7",
+    "nuxt-user-agent": "^1.2.2",
     "vuetify": "^2.5.5"
   },
   "devDependencies": {

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>

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>

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>

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>

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>

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>

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>

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. ",
       },

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",
+        },
       ],
     };
   },