Merge pull request #280 from PickleNik/ESLint-Integration

ESLint Integration

.github/weblint.yml

@@ -0,0 +1,28 @@
+# This workflow lints the code in /Website, if any was committed
+
+name: Website Lint
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - Website/**
+
+  pull_request:
+    branches: [ main ]
+    paths:
+      - Website/**
+
+jobs:
+  weblint:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@main
+    - name: npm install
+      run: npm install
+      working-directory: Website
+    - name: npm run lint
+      run: npm run lint
+      working-directory: Website

.gitignore

@@ -1,12 +1,29 @@
-*.idea
-*Backend
 *cert
+*Backend
 .DS_Store
-StaticSite/.editorconfig
-StaticSite/package-lock.json
 
+# Website node modules and build output
+Website/package-lock.json
+Website/.editorconfig
 Website/node_modules
 Website/.nuxt
-Website/.editorconfig
 Website/dist/
 Website/_nuxt
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

Website/.eslintignore

@@ -0,0 +1,10 @@
+# js vendor file with import/require
+assets/vendor/**
+# static vendor file . use with nuxt.config.js script
+static/**
+# dependencies
+node_modules
+# Nuxt build
+.nuxt
+# Nuxt generate
+dist

Website/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+  },
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  extends: [
+    "prettier",
+    "eslint:recommended",
+    "plugin:vue/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["vue"],
+  rules: {
+    "vue/multi-word-component-names": 0,
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    // 'prettier/prettier': ['error', { semi: false }],
+    // semi: [2, 'never'],
+  },
+};

Website/README.md

@@ -9,6 +9,9 @@ $ npm install
 # serve with hot reload at localhost:3000
 $ npm run dev
 
+# lint your changes
+$ npm run lint
+
 # build for production and launch server
 $ npm run build
 $ npm run start
@@ -19,6 +22,20 @@ $ npm run generate
 
 For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
 
+## Recommended VSCode Setup
+ - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) `ext install dbaeumer.vscode-eslint`
+ - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) `ext install esbenp.prettier-vscode`
+ - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
+
+>`Ctrl(Cmd)` + `Shift` + `P` > Open Settings (JSON)
+```
+"editor.formatOnSave": true,
+"editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+}
+"vetur.validation.template": false,
+```
+
 ## Special Directories
 
 You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.

Website/layouts/default.vue

@@ -1,6 +1,5 @@
 <template>
   <v-app dark>
-
     <!-- height = 4rem, margin-y = 1rem -->
     <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
       <v-tabs centered center-active color="primary" router show-arrows>
@@ -9,30 +8,66 @@
         </v-tab>
       </v-tabs>
     </v-app-bar>
-    
+
     <!-- abstract background -->
-    <v-img src="/ui/abstract.svg" style="position: absolute; left: 0; right: 0; width: 100%; height: 100%;" />
+    <v-img
+      src="/ui/abstract.svg"
+      style="position: absolute; left: 0; right: 0; width: 100%; height: 100%"
+    />
 
-    <v-main style="padding-top: 4rem !important;">
+    <v-main style="padding-top: 4rem !important">
       <!-- min-height helps keep content centered, use .debug to to see it -->
       <center
         class="py-8 mx-auto d-flex flex-column justify-center items-center"
-        style="width: 90vw; min-height: calc(100vh - 8rem);">
-          <nuxt />
+        style="width: 90vw; min-height: calc(100vh - 8rem)"
+      >
+        <nuxt />
       </center>
     </v-main>
   </v-app>
 </template>
 
+<script>
+export default {
+  data: () => ({
+    links: [
+      {
+        name: "Home",
+        path: "/",
+      },
+      {
+        name: "Install",
+        path: "/install",
+      },
+      {
+        name: "FAQ",
+        path: "/faq",
+      },
+      {
+        name: "Donate",
+        path: "/donate",
+      },
+      {
+        name: "Links",
+        path: "/links",
+      },
+    ],
+  }),
+};
+</script>
+
 <style>
-html, body {
+html,
+body {
   height: 100%;
+  background: #111; /* for MacOS/iOS overscroll */
   height: -webkit-fill-available;
   background: #111;
   overflow: auto;
 }
 
-.debug { /* usage: add class="debug" to the element */
+.debug {
+  /* usage: add class="debug" to the element */
   outline: 2px solid red;
 }
 
@@ -45,20 +80,23 @@ html, body {
   width: fit-content !important;
   background-color: #222 !important;
   border-radius: 1rem !important;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   overflow: hidden;
 }
 .title-text {
   font-size: 3rem;
 }
-@media (max-width: 768px) { /* mobile */
+@media (max-width: 768px) {
+  /* mobile */
   .title-text {
     font-size: 2rem;
   }
-  .topBar { 
-    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
+  .topBar {
+    width: calc(
+      100vw - 2rem
+    ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
-  } 
+  }
 }
 
 /* animations and all that */
@@ -102,7 +140,7 @@ html, body {
 .fly-in-from-top {
   opacity: 0;
   transform: scale(0.8) translateY(-12rem);
-  animation: fly-in-from-top 0.5s .3s ease forwards;
+  animation: fly-in-from-top 0.5s 0.3s ease forwards;
 }
 
 @keyframes fly-in-from-top {
@@ -161,32 +199,3 @@ html, body {
   }
 }
 </style>
-
-<script>
-  export default {
-    data: () => ({
-      links: [
-        {
-          name: 'Home',
-          path: '/'
-        },
-        {
-          name: 'Install',
-          path: '/install'
-        },
-        {
-          name: 'FAQ',
-          path: '/faq'
-        },
-        {
-          name: 'Donate',
-          path: '/donate'
-        },
-        {
-          name: 'Links',
-          path: '/links'
-        },
-      ],
-    }),
-  }
-</script>

Website/layouts/error.vue

@@ -6,35 +6,33 @@
     <h1 v-else>
       {{ otherError }}
     </h1>
-    <NuxtLink to="/">
-      Home page
-    </NuxtLink>
+    <NuxtLink to="/"> Home page </NuxtLink>
   </v-app>
 </template>
 
 <script>
 export default {
-  layout: 'empty',
+  layout: "empty",
   props: {
     error: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
-  data () {
+  data() {
     return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred'
-    }
+      pageNotFound: "404 Not Found",
+      otherError: "An error occurred",
+    };
   },
-  head () {
+  head() {
     const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
     return {
-      title
-    }
-  }
-}
+      title,
+    };
+  },
+};
 </script>
 
 <style scoped>

Website/nuxt.config.js

@@ -1,39 +1,42 @@
-import colors from 'vuetify/es5/util/colors'
+import colors from "vuetify/es5/util/colors";
 
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    titleTemplate: 'Return YouTube Dislike',
-    title: 'Return YouTube Dislike',
+    titleTemplate: "Return YouTube Dislike",
+    title: "Return YouTube Dislike",
     htmlAttrs: {
-      lang: 'en'
+      lang: "en",
     },
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
 
-      { hid: 'description', name: 'description', content: 'An extension that returns dislike statistics to YouTube. For now, it only works if a video had public display of dislikes enabled before YouTube removed dislike stats. ' },
-      { hid: 'og:image', name: 'og:image', content: '/logo.png' },
-      { hid: 'theme-color', name: 'theme-color', content: '#ff0000' }
+      {
+        hid: "description",
+        name: "description",
+        content:
+          "An extension that returns dislike statistics to YouTube. For now, it only works if a video had public display of dislikes enabled before YouTube removed dislike stats. ",
+      },
+      { hid: "og:image", name: "og:image", content: "/logo.png" },
+      { hid: "theme-color", name: "theme-color", content: "#ff0000" },
     ],
     link: [
-      { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' },
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+      { rel: "icon", type: "image/svg+xml", href: "/logo.svg" },
+      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
+    ],
   },
 
-  target: 'static',
+  target: "static",
   css: [],
   plugins: [],
   components: true,
-  buildModules: [
-    '@nuxtjs/vuetify',
-  ],
+  buildModules: ["@nuxtjs/vuetify"],
   modules: [],
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ["~/assets/variables.scss"],
     theme: {
       dark: true,
       themes: {
@@ -44,13 +47,23 @@ export default {
           info: colors.teal.lighten1,
           warning: colors.amber.base,
           error: colors.deepOrange.accent4,
-          success: colors.green.accent3
-        }
-      }
-    }
+          success: colors.green.accent3,
+        },
+      },
+    },
   },
 
-
-  build: {}
-
-}
+  build: {
+    extend(config, ctx) {
+      // Run ESLint on save (dev-only)
+      if (ctx.isDev && ctx.isClient) {
+        config.module.rules.push({
+          enforce: "pre",
+          test: /\.(js|vue)$/,
+          loader: "eslint-loader",
+          exclude: /(node_modules)/,
+        });
+      }
+    },
+  },
+};

Website/package.json

@@ -6,7 +6,8 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate"
+    "generate": "nuxt generate",
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."
   },
   "dependencies": {
     "core-js": "^3.15.1",
@@ -14,6 +15,13 @@
     "vuetify": "^2.5.5"
   },
   "devDependencies": {
-    "@nuxtjs/vuetify": "^1.12.1"
+    "@nuxtjs/vuetify": "^1.12.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "prettier": "^2.5.1"
   }
-}
+}

Website/pages/donate.vue

@@ -1,37 +1,39 @@
 <template>
   <div>
-
-    <h1 class="title-text" >Donate</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">You can support our efforts to keep the internet free with a donation!</p>
+    <h1 class="title-text">Donate</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!
+    </p>
     <v-btn class="mainAltButton mb-2" :href="patreonLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-patreon</v-icon>
       Patreon
     </v-btn>
     <v-btn class="mainAltButton mb-2" :to="yoomoneyLink">
-      <v-icon style="margin-right: 0.5em;">mdi-cash-multiple</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-cash-multiple</v-icon>
       Yoomoney
     </v-btn>
     <v-btn class="mainAltButton mb-2" :to="cryptoLink">
-      <v-icon style="margin-right: 0.5em;">mdi-bitcoin</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-bitcoin</v-icon>
       Crypto
     </v-btn>
-
   </div>
 </template>
 
 <script>
-  export default {
-    transition(to, from) {
-      if (!from) return 'swoop-in'
-      let routes = ['index', 'install', 'faq', 'donate', 'links']
-      if (routes.indexOf(to.name) < 0) return 'swoop-out'
-      if (routes.indexOf(from.name) < 0) return 'swoop-in'
-      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-    },
-    data: () => ({
-      patreonLink: "https://www.patreon.com/returnyoutubedislike",
-      yoomoneyLink: "/pay/yoomoney",
-      cryptoLink: "/pay/crypto"
-    })
-  }
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data: () => ({
+    patreonLink: "https://www.patreon.com/returnyoutubedislike",
+    yoomoneyLink: "/pay/yoomoney",
+    cryptoLink: "/pay/crypto",
+  }),
+};
 </script>

Website/pages/faq.vue

@@ -1,54 +1,60 @@
 <template>
   <div>
-
-    <h1 class="title-text" >Frequently Asked Questions</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">Still have questions? Feel free to join our Discord!</p>
+    <h1 class="title-text">Frequently Asked Questions</h1>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
+      Still have questions? Feel free to join our Discord!
+    </p>
 
     <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
-      <v-expansion-panel v-for="(item, i) in items" :key="i" >
+      <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
         </v-expansion-panel-header>
         <v-expansion-panel-content class="text-left">
-          <hr style="border-color: #444;">
-          <br>
+          <hr style="border-color: #444" />
+          <br />
           {{ item.answer }}
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
-
   </div>
 </template>
 
 <script>
-  export default {
-    transition(to, from) {
-      if (!from) return 'swoop-in'
-      let routes = ['index', 'install', 'faq', 'donate', 'links']
-      if (routes.indexOf(to.name) < 0) return 'swoop-out'
-      if (routes.indexOf(from.name) < 0) return 'swoop-in'
-      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-    },
-    data: () => ({
-      items: [
-        { 
-          question: "Where does the extension get its data?",
-          answer: "A combination of Google's API data and scraped data. We save all available data to our DB so it can be made available after Google removes dislike counts from their API."
-        },
-        { 
-          question: "Why isn't the dislike count updating?",
-          answer: "Right now video dislikes are cached and they aren't updated very frequently. Currently this is set to update once every 2–3 days.  This isn't ideal and we are working on improving how often we can update them."
-        },
-        { 
-          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, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then store it in the database for caching (cached for around 2-3 days) and archiving purposes, and returns it to you. The extension then displays the dislike count and ratio on the page."
-        },
-        { 
-          question: "What will happen after the YouTube API stops returning the dislike count?",
-          answer: "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data, and estimates based on view/like ratios for videos whose dislikes weren't archived as well as outdated dislike count archives."
-        },
-      ],
-    }),
-  
-  }
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data: () => ({
+    items: [
+      {
+        question: "Where does the extension get its data?",
+        answer:
+          "A combination of Google's API data and scraped data. We save all available data to our DB so it can be made available after Google removes dislike counts from their API.",
+      },
+      {
+        question: "Why isn't the dislike count updating?",
+        answer:
+          "Right now video dislikes are cached and they aren't updated very frequently. Currently this is set to update once every 2–3 days.  This isn't ideal and we are working on improving how often we can update them.",
+      },
+      {
+        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, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then store it in the database for caching (cached for around 2-3 days) and archiving purposes, and returns it to you. The extension then displays the dislike count and ratio on the page.",
+      },
+      {
+        question:
+          "What will happen after the YouTube API stops returning the dislike count?",
+        answer:
+          "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data, and estimates based on view/like ratios for videos whose dislikes weren't archived as well as outdated dislike count archives.",
+      },
+    ],
+  }),
+};
 </script>

Website/pages/index.vue

@@ -1,32 +1,55 @@
 <template>
-  <div class="d-flex flex-column justify-between" style="height: calc(100vh - 10rem)">
+  <div
+    class="d-flex flex-column justify-between"
+    style="height: calc(100vh - 10rem)"
+  >
     <div class="col"></div>
 
     <div class="col">
-      <svg id="thumbslogo" class="mb-4" width="150" height="150" viewBox="0 0 24 24" overflow="visible" >
-        <path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"/>
-        <path id="plarrow" d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" stroke="none"/>
+      <svg
+        id="thumbslogo"
+        class="mb-4"
+        width="150"
+        height="150"
+        viewBox="0 0 24 24"
+        overflow="visible"
+      >
+        <path
+          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+        />
+        <path
+          id="plarrow"
+          d="m8 12.5 5.1-2.9L8 6.7v5.8z"
+          fill="#fff"
+          stroke="none"
+        />
       </svg>
 
-      <h1 class="title-text" >Return YouTube Dislike</h1>
+      <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 show you dislikes on Youtube</p>
+        <p style="margin-top: 0">
+          Browser extension and an API that show you dislikes on Youtube
+        </p>
       </div>
 
-      <v-btn :to="installLink" color="primary px-6" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
+      <v-btn
+        :to="installLink"
+        color="primary px-6"
+        style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em"
+      >
         <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon>
         Install
       </v-btn>
 
-      <br>
+      <br />
 
       <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-        <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+        <v-icon style="margin-right: 0.5em">mdi-github</v-icon>
         GitHub
       </v-btn>
 
       <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-        <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+        <v-icon style="margin-right: 0.5em">mdi-discord</v-icon>
         Discord
       </v-btn>
     </div>
@@ -39,9 +62,11 @@
         Sponsors
       </h3>
       <v-row class="justify-center mx-auto">
-        <p v-for="sponsor in sponsors" class="sponsor">
+        <p v-for="sponsor in sponsors" :key="sponsor.name" class="sponsor">
           <a
-            :style="sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' }"
+            :style="
+              sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' }
+            "
             :href="sponsor.link"
           >
             {{ sponsor.name }}
@@ -52,6 +77,33 @@
   </div>
 </template>
 
+<script>
+export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
+  data() {
+    return {
+      installLink: "/install",
+      githubLink: "https://github.com/Anarios/return-youtube-dislike",
+      discordLink: "https://discord.gg/mYnESY4Md5",
+      sponsors: [
+        { name: "Piepacker", link: "https://piepacker.com/" },
+        { name: "nodetube", link: "https://github.com/mayeaux/nodetube" },
+        { name: "trig404" },
+        { name: "Peter33" },
+      ],
+    };
+  },
+};
+</script>
+
 <style scoped>
 .sponsor {
   margin: 1rem;
@@ -60,7 +112,7 @@
 
 @media (max-width: 767px) {
   .sponsor {
-    margin: .5rem;
+    margin: 0.5rem;
     height: max-content;
   }
 }
@@ -71,21 +123,23 @@
   stroke: #f44;
   transition-property: opacity, transform;
   transform: scale(0) rotate(180deg);
-  animation: popin 1s .3s ease-in-out 1 forwards, tap .3s 1.7s ease-in-out 1 forwards;
+  animation: popin 1s 0.3s ease-in-out 1 forwards,
+    tap 0.3s 1.7s ease-in-out 1 forwards;
 }
 
 #plarrow {
   opacity: 0;
   transform: translateX(-0.25rem);
   transition-property: opacity, transform;
-  animation: slidin .5s 1.7s ease 1 forwards;
+  animation: slidin 0.5s 1.7s ease 1 forwards;
 }
 
 @keyframes slidin {
   0% {
     opacity: 0;
     transform: translateX(-0.25rem);
-  } 100% {
+  }
+  100% {
     opacity: 1;
     transform: translateX(0);
   }
@@ -95,7 +149,8 @@
   0% {
     transform: rotate(180deg) scale(0);
     opacity: 0;
-  } 100% {
+  }
+  100% {
     transform: rotate(0deg) scale(1);
     opacity: 1;
   }
@@ -104,7 +159,8 @@
 @keyframes fadein {
   0% {
     opacity: 0;
-  } 100% {
+  }
+  100% {
     opacity: 1;
   }
 }
@@ -114,11 +170,13 @@
     fill: transparent;
     stroke: #f44;
     transform: scale(1);
-  } 25% {
+  }
+  25% {
     fill: #f44;
     stroke: none;
-    transform: scale(.85);
-  } 100% {
+    transform: scale(0.85);
+  }
+  100% {
     fill: #f44;
     stroke: none;
     transform: scale(1);
@@ -143,32 +201,7 @@
     opacity: 0;
     transform: none;
     transition-property: opacity;
-    animation: fadein .5s .5s ease 1 forwards;
+    animation: fadein 0.5s 0.5s ease 1 forwards;
   }
 }
 </style>
-
-<script>
-export default {
-  transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
-  },
-  data() {
-    return {
-      installLink: "/install",
-      githubLink: "https://github.com/Anarios/return-youtube-dislike",
-      discordLink: "https://discord.gg/mYnESY4Md5",
-      sponsors: [
-        {name: "Piepacker", link: "https://piepacker.com/" },
-        {name: "nodetube", link: "https://github.com/mayeaux/nodetube"},
-        {name: "trig404"},
-        {name: "Peter33"}
-      ]
-    }
-  }
-}
-</script>

Website/pages/install.vue

@@ -1,79 +1,102 @@
 <template>
   <div>
+    <h1 class="title-text">Select Your Platform</h1>
 
-    <h1 class="title-text" >Select Your Platform</h1>
-
-    <div style="color: #999;">
-      <p style=" margin-top: .5rem; margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
-      <p style="margin-bottom: 1rem;">Available for Firefox and all Chromium browsers (Chrome/Edge/Opera/Brave).</p>
+    <div style="color: #999">
+      <p style="margin-top: 0.5rem; margin-bottom: 0">
+        This is an <b>ALPHA version!</b> It may be slow. It may be buggy.
+      </p>
+      <p style="margin-bottom: 1rem">
+        Available for Firefox and all Chromium browsers
+        (Chrome/Edge/Opera/Brave).
+      </p>
     </div>
 
     <v-btn class="mainAltButton mb-2" :href="firefoxLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-firefox</v-icon>
       Firefox
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-google-chrome</v-icon>
       Chrome
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-microsoft-edge</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-microsoft-edge</v-icon>
       Edge
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-opera</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-opera</v-icon>
       Opera
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <!-- brave logo icon -->
-      <svg style="margin-right: 1rem;" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"/></svg>
+      <svg
+        style="margin-right: 1rem"
+        height="20"
+        width="20"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#fff"
+      >
+        <path
+          d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"
+        />
+      </svg>
       Brave
     </v-btn>
 
-    <h3 style="margin-top: 3em; margin-bottom:0">Other Platforms</h3>
+    <h3 style="margin-top: 3em; margin-bottom: 0">Other Platforms</h3>
     <div style="color: #999">
-      <p style="margin-top: .5rem; margin-bottom:.5rem;">If your browser is not yet supported, try this UserScript.</p>
+      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
+        If your browser is not yet supported, try this UserScript.
+      </p>
     </div>
 
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
-      Userscript &nbsp;<div style="font-size: .55rem;"> (Tampermonkey)</div>
+      <v-icon style="margin-right: 0.5em">mdi-script-text-outline</v-icon>
+      Userscript &nbsp;
+      <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: .5rem; margin-bottom: .5rem;">No liability on our side, use at your own risk.</p>
+    <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>
     <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-apple</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-apple</v-icon>
       iOS (Jailbroken)
     </v-btn>
-
-
   </div>
 </template>
 
 <script>
 export default {
   transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
   },
   data() {
     return {
-      chromeLink: "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",
-      firefoxLink: "https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/",
-      scriptLink: "https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js",
+      chromeLink:
+        "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",
+      firefoxLink:
+        "https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/",
+      scriptLink:
+        "https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js",
 
-      iosJailbreakLink: "https://repo.lillieweeb001.xyz/"
-    }
-  }
-}
+      iosJailbreakLink: "https://repo.lillieweeb001.xyz/",
+    };
+  },
+};
 </script>

Website/pages/links.vue

@@ -1,61 +1,67 @@
 <template>
   <div style="height: 100%">
-    
-    <h1 class="title-text" >Project Links</h1>
-          
+    <h1 class="title-text">Project Links</h1>
+
     <div style="color: #999">
-      <p style="margin-top: .5rem; margin-bottom: 1rem;">Links to the project and its developers</p>
+      <p style="margin-top: 0.5rem; margin-bottom: 1rem">
+        Links to the project and its developers
+      </p>
     </div>
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-github</v-icon>
       GitHub
     </v-btn>
 
     <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-discord</v-icon>
       Discord
     </v-btn>
 
-    <h1 style="margin-top: 1em;">Contact Me</h1>
+    <h1 style="margin-top: 1em">Contact Me</h1>
 
     <v-btn class="mainAltButton" :href="emailLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-email</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-email</v-icon>
       Email
     </v-btn>
 
     <p id="credits" class="flex-row no-wrap">
       Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990
-      <br>
-      <span style="color: #444; font-size: 0.75rem">& <v-icon color="#333" size="1rem">mdi-discord</v-icon> PickleNik#0864</span>
+      <br />
+      <span style="color: #444; font-size: 0.75rem"
+        >&
+        <v-icon color="#333" size="1rem">mdi-discord</v-icon>
+        PickleNik#0864</span
+      >
     </p>
-
   </div>
 </template>
 
-<style scoped>
-#credits {
-  transform: translate(0,100%);
-  color: #555;
-}
-</style>
-
 <script>
 export default {
   transition(to, from) {
-    if (!from) return 'swoop-in'
-    let routes = ['index', 'install', 'faq', 'donate', 'links']
-    if (routes.indexOf(to.name) < 0) return 'swoop-out'
-    if (routes.indexOf(from.name) < 0) return 'swoop-in'
-    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
   },
   data() {
     return {
       githubLink: "https://github.com/Anarios/return-youtube-dislike",
       discordLink: "https://discord.gg/mYnESY4Md5",
 
-      emailLink: "mailto:selivano.d@gmail.com "
-    }
-  }
-}
+      emailLink: "mailto:selivano.d@gmail.com ",
+    };
+  },
+};
 </script>
+
+<style scoped>
+#credits {
+  transform: translate(0, 100%);
+  color: #555;
+}
+</style>

Website/pages/pay/crypto.vue

@@ -1,27 +1,15 @@
 <template>
   <v-container>
     <v-row dense>
-      <v-col
-          v-for="card in cards"
-          :key="card.title"
-          :lg="4"
-          :sm="12"
-      >
+      <v-col v-for="card in cards" :key="card.title" :lg="4" :sm="12">
         <v-card height="100%">
-
           <v-card-title>
             {{ card.title }}
           </v-card-title>
           <v-card-text style="height: 80px">
             {{ card.address }}
           </v-card-text>
-          <v-img
-              :src="card.img"
-              :contain=true
-              height="400px"
-              position="top"
-          >
-
+          <v-img :src="card.img" :contain="true" height="400px" position="top">
           </v-img>
         </v-card>
       </v-col>
@@ -31,27 +19,30 @@
 
 <script>
 export default {
-  transition (to, from) {
-    return to.name == 'crypto' ? 'swoop-in' : 'swoop-out';
+  transition(to) {
+    return to.name == "crypto" ? "swoop-in" : "swoop-out";
   },
   data: () => ({
-    cards: [{
-      title: 'Bitcoin',
-      address: 'bitcoin:bc1q90v030fu4z2hzz3x6a4zcwxuzauxkt8gjv8pws',
-      img: '/qrs/bitcoin.jpg'
-    }, {
-      title: 'Monero',
-      address: 'monero:431SM1vExRbdiq5jArCMkhey1g8kYhLYkbgkXYU4kgL6UrXNRzcXtz3HJDayph6Dcb3ErTg8ZAVqJGtS1Ya7Rr9URJ24Tbe',
-      img: '/qrs/monero.jpg'
-    }, {
-      title: 'Ethereum',
-      address: 'ethereum:0x981A99cDE3f4E1Ad49Ad84FB62Eca3606007eBEc',
-      img: '/qrs/ethereum.jpg'
-    }]
-  })
+    cards: [
+      {
+        title: "Bitcoin",
+        address: "bitcoin:bc1q90v030fu4z2hzz3x6a4zcwxuzauxkt8gjv8pws",
+        img: "/qrs/bitcoin.jpg",
+      },
+      {
+        title: "Monero",
+        address:
+          "monero:431SM1vExRbdiq5jArCMkhey1g8kYhLYkbgkXYU4kgL6UrXNRzcXtz3HJDayph6Dcb3ErTg8ZAVqJGtS1Ya7Rr9URJ24Tbe",
+        img: "/qrs/monero.jpg",
+      },
+      {
+        title: "Ethereum",
+        address: "ethereum:0x981A99cDE3f4E1Ad49Ad84FB62Eca3606007eBEc",
+        img: "/qrs/ethereum.jpg",
+      },
+    ],
+  }),
 };
 </script>
 
-<style>
-
-</style>
+<style></style>

Website/pages/pay/yoomoney.vue

@@ -1,13 +1,20 @@
 <template>
   <div>
-    <iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;" allowtransparency="true" scrolling="no" width="423" height="222" frameborder="0" />
+    <iframe
+      src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;"
+      allowtransparency="true"
+      scrolling="no"
+      width="423"
+      height="222"
+      frameborder="0"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  transition(to, from) {
-    return to.name == 'yoomoney' ? 'swoop-in' : 'swoop-out'
+  transition(to) {
+    return to.name == "yoomoney" ? "swoop-in" : "swoop-out";
   },
-}
-</script>
+};
+</script>