remove faulty base URL constructor, reformatting, SearchResults remove commented code

client/src/components/SearchResults.vue

@@ -2,58 +2,52 @@
     <div>
         <ais-hits>
             <div slot-scope="{ items }">
-                <SearchResult v-for="item in items" :item="item" :key="item.objectID"></SearchResult>
-<!--                <b-card v-for="item in items" :key="item.objectID" class="mb-1" body-class="p-0 py-2">-->
-<!--                    <b-card-text class="p-1 pl-2">-->
-<!--                        <strong v-html="item._highlightResult.speaker.value"></strong>:-->
-<!--                        <span v-html="item._highlightResult.text.value" class="pl-1"></span>-->
-<!--                                                <strong>{{ item.speaker }}</strong>:-->
-<!--                                                <ais-highlight attribute="text" :hit="item"/>-->
-<!--                        <QuoteList :quotes="scene.quotes"></QuoteList>-->
-<!--                    </b-card-text>-->
-<!--                    <template v-slot:footer>-->
-<!--                   <router-link class="no-link pl-1" :to="`/${item.season}/${item.episode}#${item.section}`">-->
-<!--                            Season {{ item.season }} Episode {{ item.episode }} Scene {{ item.section }}-->
-<!--                        </router-link>-->
-<!--                    </template>-->
-<!--                </b-card>-->
+                <SearchResult
+                    v-for="item in items"
+                    :item="item"
+                    :key="item.objectID"
+                ></SearchResult>
             </div>
         </ais-hits>
     </div>
 </template>
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
 
-    .card-footer {
-        padding: 0.1em;
-        font-size: 0.8em;
-        color: grey;
-    }
+.card-footer {
+    padding: 0.1em;
+    font-size: 0.8em;
+    color: grey;
+}
 
-    mark, .mark {
-        padding: 0.02em;
-        background-color: $highlight;
-        /*color: #black;*/
-        /*-webkit-filter: invert(100%);*/
-        /*filter: invert(100%);*/
-    }
+mark,
+.mark {
+    padding: 0.02em;
+    background-color: $highlight;
+    /*color: #black;*/
+    /*-webkit-filter: invert(100%);*/
+    /*filter: invert(100%);*/
+}
 
-    .ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
-        /*margin-top: 1rem;*/
-        /*margin-left: 1rem;*/
-        /*padding: 1rem;*/
-        /*width: calc(25% - 1rem);*/
-        border: none;
-        box-shadow: none;
-    }
+.ais-Hits-item,
+.ais-InfiniteHits-item,
+.ais-InfiniteResults-item,
+.ais-Results-item {
+    /*margin-top: 1rem;*/
+    /*margin-left: 1rem;*/
+    /*padding: 1rem;*/
+    /*width: calc(25% - 1rem);*/
+    border: none;
+    box-shadow: none;
+}
 </style>
 <script>
-import SearchResult from './SearchResult.vue';
+import SearchResult from "./SearchResult.vue";
 
 export default {
-  name: 'SearchResults',
-  components: {
-    SearchResult,
-  },
+    name: "SearchResults",
+    components: {
+        SearchResult,
+    },
 };
 </script>

client/src/components/SeasonList.vue

@@ -1,7 +1,15 @@
 <template>
     <div class="accordion" role="tablist">
-        <b-card class="season-item" v-for="season in seasons" :key="season.season_id">
-            <b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id">
+        <b-card
+            class="season-item"
+            v-for="season in seasons"
+            :key="season.season_id"
+        >
+            <b-card-header
+                header-tag="header"
+                role="tab"
+                v-b-toggle="'accordion-' + season.season_id"
+            >
                 <a class="no-link align-items-center justify-content-between d-flex">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
@@ -9,20 +17,36 @@
                     <b-icon class="" icon="chevron-down"></b-icon>
                 </a>
             </b-card-header>
-            <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
+            <b-collapse
+                :id="'accordion-' + season.season_id"
+                accordion="accordion-season-list"
+            >
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="episode in season.episodes">
-                            <b-list-group-item class="no-link episode-item"
-                                               :id="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                               :key="`rl-${episode.episode_id}`"
-                                               :to="{ name: 'Episode', params: { season: season.season_id,
-                                               episode: episode.episode_id} }">
+                            <b-list-group-item
+                                class="no-link episode-item"
+                                :id="`s-${season.season_id}-ep-${episode.episode_id}`"
+                                :key="`rl-${episode.episode_id}`"
+                                :to="{
+                  name: 'Episode',
+                  params: {
+                    season: season.season_id,
+                    episode: episode.episode_id,
+                  },
+                }"
+                            >
                                 Episode {{ episode.episode_id }} - "{{ episode.title }}"
                             </b-list-group-item>
-                            <b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25"
-                                       :target="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                       triggers="hover" placement="right">
+                            <b-popover
+                                show
+                                :key="`bpop-${episode.episode_id}`"
+                                variant="secondary"
+                                delay="25"
+                                :target="`s-${season.season_id}-ep-${episode.episode_id}`"
+                                triggers="hover"
+                                placement="right"
+                            >
                                 <template v-slot:title>{{ episode.title }}</template>
                                 {{ episode.description }}
                             </b-popover>
@@ -69,19 +93,23 @@
 }
 
 // Dark theme popover, arrow-right fix
-.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
+.bs-popover-top > .arrow::after,
+.bs-popover-auto[x-placement^="top"] > .arrow::after {
     border-top-color: darken($grey-3, 2%);
 }
 
-.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
+.bs-popover-bottom > .arrow::after,
+.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
     border-bottom-color: darken($grey-3, 2%);
 }
 
-.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
+.bs-popover-left > .arrow::after,
+.bs-popover-auto[x-placement^="left"] > .arrow::after {
     border-left-color: darken($grey-3, 2%);
 }
 
-.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
+.bs-popover-right > .arrow::after,
+.bs-popover-auto[x-placement^="right"] > .arrow::after {
     border-right-color: darken($grey-3, 2%);
 }
 
@@ -110,7 +138,7 @@
         background-color: darken($grey-2, 1.5%);
         color: $grey-9;
         border-bottom: 1px solid $grey-0;
-        font-family: 'Montserrat', sans-serif;
+        font-family: "Montserrat", sans-serif;
     }
 }
 
@@ -121,7 +149,9 @@
     border-left-width: 0;
     border-right-width: 0;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
         background-color: darken($grey-1, 0.75%);
     }
 }
@@ -138,30 +168,31 @@
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-  name: 'SeasonList',
-  data() {
-    return {
-      seasons: [],
-    };
-  },
-  methods: {
-    getSeasons() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/episodes/`;
-      axios.get(path)
-        .then((res) => {
-          this.seasons = res.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        });
+    name: "SeasonList",
+    data() {
+        return {
+            seasons: [],
+        };
+    },
+    methods: {
+        getSeasons() {
+            const path = `${process.env.VUE_APP_API_URL}/api/episodes/`;
+            axios
+                .get(path)
+                .then((res) => {
+                    this.seasons = res.data;
+                })
+                .catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        },
+    },
+    created() {
+        this.getSeasons();
     },
-  },
-  created() {
-    this.getSeasons();
-  },
 };
 </script>

client/src/components/Skeleton.vue

@@ -17,20 +17,21 @@
 }
 
 @-webkit-keyframes SkeletonLoading {
-0% {
-    background-position: -200px 0;
-}
-100% {
-    background-position: calc(200px + 100%) 0;
-}
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
 }
+
 @keyframes SkeletonLoading {
-0% {
-    background-position: -200px 0;
-}
-100% {
-    background-position: calc(200px + 100%) 0;
-}
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
 }
 
 span {

client/src/router.js

@@ -9,7 +9,6 @@ Vue.use(Router);
 
 export default new Router({
     mode: "history",
-    base: process.env.VUE_APP_BASE_URL,
     routes: [
         {
             path: "/",

dist/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>TheOfficeQuotes</title><base href=/ ><link href=/static/css/app.be370d07.css rel=preload as=style><link href=/static/css/chunk-vendors.69e8e4a1.css rel=preload as=style><link href=/static/js/app.cc2221b5.js rel=preload as=script><link href=/static/js/chunk-vendors.02aa3282.js rel=preload as=script><link href=/static/css/chunk-vendors.69e8e4a1.css rel=stylesheet><link href=/static/css/app.be370d07.css rel=stylesheet></head><style>body {
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>TheOfficeQuotes</title><base href=/ ><link href=/static/css/app.be370d07.css rel=preload as=style><link href=/static/css/chunk-vendors.69e8e4a1.css rel=preload as=style><link href=/static/js/app.0d8a2770.js rel=preload as=script><link href=/static/js/chunk-vendors.02aa3282.js rel=preload as=script><link href=/static/css/chunk-vendors.69e8e4a1.css rel=stylesheet><link href=/static/css/app.be370d07.css rel=stylesheet></head><style>body {
             background: #0a0a0a;
         }
 
@@ -132,4 +132,4 @@
         aa('init', {
             appId: W6VCX4QD3K,
             apiKey: b71249cd1a242dc10b8dee9d285d7d0b
-        });</script><body><noscript><strong>We're sorry but TheOfficeQuotes doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app><div id=loading-wrapper><div class=cssload-loader><div class="cssload-inner cssload-one"></div><div class="cssload-inner cssload-two"></div><div class="cssload-inner cssload-three"></div></div></div></div><script src=/static/js/chunk-vendors.02aa3282.js></script><script src=/static/js/app.cc2221b5.js></script></body></html>
+        });</script><body><noscript><strong>We're sorry but TheOfficeQuotes doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app><div id=loading-wrapper><div class=cssload-loader><div class="cssload-inner cssload-one"></div><div class="cssload-inner cssload-two"></div><div class="cssload-inner cssload-three"></div></div></div></div><script src=/static/js/chunk-vendors.02aa3282.js></script><script src=/static/js/app.0d8a2770.js></script></body></html>