Feat: vite & upgraded dependencies (#100)

* On every route change, update local variables from query params

* ResultSection is keyed to query to force re-render

* Resolved lint warnings

* replace webpack w/ vite

* update all imports with alias @ and scss

* vite environment variables, also typed

* upgraded eslint, defined new rules & added ignore comments

* resolved linting issues

* moved index.html to project root

* updated dockerfile w/ build stage before runtime image definition

* sign drone config

src/components/CastList.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script setup lang="ts">
-  import CastListItem from "src/components/CastListItem.vue";
+  import { defineProps } from "vue";
+  import CastListItem from "@/components/CastListItem.vue";
   import type {
     IMovie,
     IShow,

src/components/LandingBanner.vue

@@ -100,8 +100,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   header {
     width: 100%;

src/components/PageHeader.vue

@@ -47,9 +47,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     width: 100%;

src/components/Popup.vue

@@ -46,7 +46,7 @@
     let _type: MediaTypes;
 
     const params = new URLSearchParams(window.location.search);
-    params.forEach((value, key) => {
+    params.forEach((_, key) => {
       if (
         key !== MediaTypes.Movie &&
         key !== MediaTypes.Show &&
@@ -90,8 +90,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .movie-popup {
     position: fixed;

src/components/ResultsList.vue

@@ -34,8 +34,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .no-results {
     width: 100%;

src/components/ResultsListItem.vue

@@ -111,9 +111,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .movie-item {
     padding: 15px;

src/components/ResultsSection.vue

@@ -172,7 +172,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .resultSection {
     background-color: var(--background-color);

src/components/header/AutocompleteDropdown.vue

@@ -29,12 +29,11 @@ Searches Elasticsearch for results based on changes to `query`.
 -->
 
 <script setup lang="ts">
-  import { ref, watch } from "vue";
-  import { useStore } from "vuex";
-  import IconMovie from "@/icons/IconMovie.vue";
-  import IconShow from "@/icons/IconShow.vue";
-  import IconPerson from "@/icons/IconPerson.vue";
   import type { Ref } from "vue";
+  import { ref, watch, defineProps } from "vue";
+  import { useStore } from "vuex";
+  import IconMovie from "../../icons/IconMovie.vue";
+  import IconShow from "../../icons/IconShow.vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
   import type {
@@ -161,9 +160,9 @@ Searches Elasticsearch for results based on changes to `query`.
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
   $sizes: 22;
 
   @for $i from 0 through $sizes {
@@ -241,7 +240,9 @@ Searches Elasticsearch for results based on changes to `query`.
     cursor: pointer;
     white-space: nowrap;
 
-    transition: color 0.1s ease, fill 0.4s ease;
+    transition:
+      color 0.1s ease,
+      fill 0.4s ease;
 
     span {
       overflow-x: hidden;

src/components/header/NavigationHeader.vue

@@ -61,8 +61,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .spacer {
     @include mobile-only {

src/components/header/NavigationIcon.vue

@@ -37,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-link {
     display: grid;
@@ -47,8 +47,13 @@
     padding: 1rem 0.15rem;
     text-align: center;
     background-color: var(--background-color-secondary);
-    transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-      fill 0.3s ease, background-color 0.5s ease;
+    transition:
+      transform 0.3s ease,
+      color 0.3s ease,
+      stoke 0.3s ease,
+      fill 0.3s ease,
+      background-color 0.5s ease;
+    transition: all 0.3s ease;
 
     &:hover {
       transform: scale(1.05);

src/components/header/NavigationIcons.vue

@@ -77,7 +77,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-icons {
     display: grid;

src/components/header/SearchInput.vue

@@ -55,13 +55,13 @@ the `query`.
 -->
 
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import { useRouter, useRoute } from "vue-router";
-  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
-  import IconSearch from "@/icons/IconSearch.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import type { Ref } from "vue";
+  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import IconSearch from "../../icons/IconSearch.vue";
+  import IconClose from "../../icons/IconClose.vue";
   import type { MediaTypes } from "../../interfaces/IList";
 import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 
@@ -98,13 +98,9 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const { ELASTIC, ELASTIC_APIKEY } = process.env;
-  if (
-    ELASTIC === undefined ||
-    ELASTIC === "" ||
-    ELASTIC_APIKEY === undefined ||
-    ELASTIC_APIKEY === ""
-  ) {
+  const ELASTIC_URL = import.meta.env.VITE_ELASTIC_URL;
+  const ELASTIC_API_KEY = import.meta.env.VITE_ELASTIC_API_KEY;
+  if (!ELASTIC_URL || !ELASTIC_API_KEY) {
     disabled.value = true;
   }
 
@@ -184,9 +180,9 @@ import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .close-icon {
     position: absolute;

src/components/popup/ActionButton.vue

@@ -24,7 +24,7 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   li.sidebar-list-element {
     display: flex;

src/components/popup/Description.vue

@@ -27,7 +27,6 @@
   const overflow: Ref<boolean> = ref(false);
   const descriptionElement: Ref<HTMLElement> = ref(null);
 
-  // eslint-disable-next-line no-undef
   function removeElements(elems: NodeListOf<Element>) {
     elems.forEach(el => el.remove());
   }
@@ -67,7 +66,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-description {
     font-weight: 300;

src/components/popup/Detail.vue

@@ -17,7 +17,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-detail {
     margin-bottom: 20px;

src/components/popup/Movie.vue

@@ -169,21 +169,20 @@
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconRequested from "@/icons/IconRequested.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
-  import CastList from "@/components/CastList.vue";
-  import Detail from "@/components/popup/Detail.vue";
-  import ActionButton from "@/components/popup/ActionButton.vue";
-  import Description from "@/components/popup/Description.vue";
-  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
-  import type { Ref } from "vue";
+  import IconProfile from "../../icons/IconProfile.vue";
+  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconInfo from "../../icons/IconInfo.vue";
+  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequested from "../../icons/IconRequested.vue";
+  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconPlay from "../../icons/IconPlay.vue";
+  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import CastList from "../CastList.vue";
+  import Detail from "./Detail.vue";
+  import ActionButton from "./ActionButton.vue";
+  import Description from "./Description.vue";
+  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
   import type {
     IMovie,
     IShow,
@@ -342,10 +341,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     $duration: 0.2s;

src/components/popup/Person.vue

@@ -165,10 +165,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   section.person {
     overflow: hidden;

src/components/profile/ChangePassword.vue

@@ -85,7 +85,7 @@
     try {
       validate();
     } catch (error) {
-      console.log("not valid!"); // eslint-disable-line no-console
+      console.log("not valid! error:", error); // eslint-disable-line no-console
     }
 
     // const body: ResetPasswordPayload = {

src/components/torrent/TorrentSearchResults.vue

@@ -102,9 +102,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   h2 {
     font-size: 20px;
@@ -115,13 +115,8 @@
     margin: 1rem 0;
   }
 
-  .container {
-    background-color: $background-color;
-  }
-
   .no-results {
     display: flex;
-    padding-bottom: 2rem;
     justify-content: center;
     flex-direction: column;
     width: 100%;

src/components/torrent/TorrentTable.vue

@@ -155,9 +155,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   table {
     border-spacing: 0;

src/components/torrent/TruncatedTorrentResults.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from "vue";
   import { useRouter } from "vue-router";
+  import { ref, defineProps, computed } from "vue";
   import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import IconArrowDown from "@/icons/IconArrowDown.vue";

src/components/ui/Hamburger.vue

@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .nav__hamburger {
     display: block;

src/components/ui/Loader.vue

@@ -22,7 +22,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .loader {
     display: flex;

src/components/ui/LoadingPlaceholder.vue

@@ -20,5 +20,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
+  @import "scss/loading-placeholder";
 </style>

src/components/ui/SeasonedButton.vue

@@ -23,8 +23,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   button {
     display: inline-block;
@@ -42,7 +42,10 @@
     background: $background-color-secondary;
     cursor: pointer;
     outline: none;
-    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
+    transition:
+      background 0.5s ease,
+      color 0.5s ease,
+      border-color 0.5s ease;
 
     @include desktop {
       font-size: 0.8rem;

src/components/ui/SeasonedInput.vue

@@ -74,8 +74,8 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .group {
     display: flex;

src/components/ui/SeasonedMessages.vue

@@ -64,8 +64,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .fade-active {
     transition: opacity 0.4s;

src/components/ui/ToggleButton.vue

@@ -33,7 +33,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   $background: $background-ui;
   $background-selected: $background-color-secondary;