re-add vue.config.js, update to dist, separate BASE_URL and API_URL for permalink calculation

client/.env.development

@@ -1 +1,2 @@
-VUE_APP_BASE_APP_URL=http://192.168.2.35:5000
+VUE_APP_API_URL=http://192.168.2.35:5000
+VUE_APP_BASE_URL=http://192.168.2.35:8080

client/.env.production

@@ -1 +1,2 @@
-VUE_APP_BASE_APP_URL=
+VUE_APP_API_URL=http://192.168.2.35:5000
+VUE_APP_BASE_URL=http://192.168.2.35:5000

client/src/components/QuoteList.vue

@@ -1,15 +1,24 @@
 <template>
     <table class="quote-list px-3 w-100">
-        <tr v-for="(quote, index) in quotes" :key="`quote-${index}`" :id="`${sceneIndex}-${index}`"
-            :class="$route.hash !== null && $route.hash.substring(1) === `${sceneIndex}-${index}` ? 'highlight' : ''">
+        <tr
+            v-for="(quote, index) in quotes"
+            :key="`quote-${index}`"
+            :id="`${sceneIndex}-${index}`"
+            :class="
+        $route.hash !== null &&
+        $route.hash.substring(1) === `${sceneIndex}-${index}`
+          ? 'highlight'
+          : ''
+      "
+        >
             <td class="quote-speaker pl-3" v-if="quote.speaker">
-                <span class="my-3">
-                    {{ quote.speaker }}
-                </span>
+        <span class="my-3">
+          {{ quote.speaker }}
+        </span>
             </td>
             <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
             <td class="px-1 pl-2">
-                <a :href="quote_link(index)" class="no-link">
+                <a :href="quote_link(index)" @click="copy(index)" class="no-link">
                     <b-icon icon="link45deg"></b-icon>
                 </a>
             </td>
@@ -19,12 +28,14 @@
 
 <style lang="scss">
 @import "../assets/scss/_variables";
+
 .quote-list > tr {
     white-space: nowrap;
 
     &:hover {
         background-color: $grey-4;
     }
+
     &.highlight {
         background-color: $grey-5 !important;
     }
@@ -41,39 +52,47 @@
     font-weight: 600;
     vertical-align: text-top;
     text-align: right;
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
 }
 
 table.quote-list tr td:last-child {
     height: 100%;
-    a { height: 100%; }
+
+    a {
+        height: 100%;
+    }
+
     svg {
         font-size: 1.35em;
         opacity: 0;
         transition: opacity 0.1s ease-in;
     }
 }
+
 table.quote-list tr:hover td:last-child svg {
-    opacity: 100%;
+    opacity: 1;
 }
 </style>
 
 <script>
 export default {
-  props: {
-    sceneIndex: {
-      required: true,
-      type: Number,
+    props: {
+        sceneIndex: {
+            required: true,
+            type: Number,
+        },
+        quotes: {
+            required: true,
+            type: Array,
+        },
     },
-    quotes: {
-      required: true,
-      type: Array,
+    methods: {
+        quote_link(quoteIndex) {
+            return `/${this.$route.params.season}/${this.$route.params.episode}#${this.sceneIndex}-${quoteIndex}`;
+        },
+        copy(quoteIndex) {
+            this.$copyText(process.env.VUE_APP_BASE_URL + this.quote_link(quoteIndex))
+        }
     },
-  },
-  methods: {
-    quote_link(quoteIndex) {
-      return `/${this.$route.params.season}/${this.$route.params.episode}#${this.sceneIndex}-${quoteIndex}`;
-    },
-  },
 };
 </script>

client/src/router.js

@@ -1,51 +1,51 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Home from './components/Home.vue';
-import Episode from './components/Episode.vue';
-import SearchResults from './components/SearchResults.vue';
-import Character from './components/Character.vue';
+import Vue from "vue";
+import Router from "vue-router";
+import Home from "./components/Home.vue";
+import Episode from "./components/Episode.vue";
+import SearchResults from "./components/SearchResults.vue";
+import Character from "./components/Character.vue";
 
 Vue.use(Router);
 
 export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: Home,
+    mode: "history",
+    base: process.env.VUE_APP_BASE_URL,
+    routes: [
+        {
+            path: "/",
+            name: "Home",
+            component: Home,
+        },
+        {
+            path: "/character/:character",
+            name: "Character",
+            component: Character,
+        },
+        {
+            path: "/:season/:episode",
+            name: "Episode",
+            component: Episode,
+        },
+        {
+            path: "/search_results",
+            name: "SearchResults",
+            component: SearchResults,
+        },
+        {
+            path: "*",
+        },
+    ],
+    scrollBehavior(to, from, savedPosition) {
+        // https://router.vuejs.org/guide/advanced/scroll-behavior.html
+        if (to.hash) {
+            return {selector: to.hash};
+        }
+        if (savedPosition) {
+            return savedPosition;
+        }
+        return {
+            x: 0,
+            y: 0,
+        };
     },
-    {
-      path: '/character/:character',
-      name: 'Character',
-      component: Character,
-    },
-    {
-      path: '/:season/:episode',
-      name: 'Episode',
-      component: Episode,
-    },
-    {
-      path: '/search_results',
-      name: 'SearchResults',
-      component: SearchResults,
-    },
-    {
-      path: '*',
-    },
-  ],
-  scrollBehavior(to, from, savedPosition) {
-    // https://router.vuejs.org/guide/advanced/scroll-behavior.html
-    if (to.hash) {
-      return { selector: to.hash };
-    }
-    if (savedPosition) {
-      return savedPosition;
-    }
-    return {
-      x: 0,
-      y: 0,
-    };
-  },
 });

client/vue.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  outputDir: '../dist/',
+  assetsDir: './static',
+};

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.57522fd7.css rel=preload as=style><link href=/static/css/chunk-vendors.69e8e4a1.css rel=preload as=style><link href=/static/js/app.1dd5bf93.js rel=preload as=script><link href=/static/js/chunk-vendors.a97a7260.js rel=preload as=script><link href=/static/css/chunk-vendors.69e8e4a1.css rel=stylesheet><link href=/static/css/app.57522fd7.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.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 {
             background: #0a0a0a;
         }
 
@@ -119,4 +119,17 @@
             100% {
                 -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
             }
-        }</style><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.a97a7260.js></script><script src=/static/js/app.1dd5bf93.js></script></body></html>
+        }</style><script>var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.3.1";
+
+        !function (e, a, t, n, s, i, c) {
+            e.AlgoliaAnalyticsObject = s, e[s] = e[s] || function () {
+                (e[s].queue = e[s].queue || []).push(arguments)
+            }, i = a.createElement(t), c = a.getElementsByTagName(t)[0],
+                i.async = 1, i.src = n, c.parentNode.insertBefore(i, c)
+        }(window, document, "script", ALGOLIA_INSIGHTS_SRC, "aa");
+
+        // Initialize library
+        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>

dist/static/css/app.57522fd7.css

@@ -1 +0,0 @@
-@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);.season-item>.card-body>.card-header{cursor:pointer}.bi-chevron-down{transition:all .25s ease-in-out}.not-collapsed>.bi-chevron-down{transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg)}.b-popover{background:transparent}.popover-header{background-color:#1d1d1d;border-color:#131313;color:#ddd}.bs-popover-auto[x-placement^=right]>.arrow:after,.bs-popover-right>.arrow:after{border-right-color:#131313}.popover-body{color:#cfcfcf;background-color:#131313}.season-title{color:#a0a0a0;cursor:pointer}.season-item .card-body{padding:0}.season-item .card-header{background-color:#131313;color:#b3b3b3;border-bottom:1px solid #070707;font-family:Montserrat,sans-serif}.episode-item{border-color:#131313;color:#a0a0a0;border-left-width:0;border-right-width:0}.episode-item,.episode-item:hover{background-color:#131313}.no-link,.no-link:hover{color:inherit;text-decoration:none}body{background-color:#0a0a0a;font-family:Roboto,sans-serif}.ais-SearchBox-form{border:none}.ais-SearchBox-input{color:#a0a0a0;background-color:#3e3e3e;border-color:transparent;border-radius:1px}.ais-SearchBox-resetIcon>path,.ais-SearchBox-submitIcon>path{fill:#b3b3b3}.ais-SearchBox-input::-moz-placeholder{color:#fff}.ais-SearchBox-input:-ms-input-placeholder{color:#fff}.ais-SearchBox-input::-ms-input-placeholder{color:#fff}.ais-SearchBox-input::placeholder{color:#fff}.card{color:#b3b3b3;background-color:#131313;border-bottom:1px solid #0e0e0e;border-radius:0}.quote-speaker{min-width:100px}.btn,.btn:focus{box-shadow:none}.character-button{color:#cfcfcf;background-color:#242424;border-color:#1d1d1d}.character-button:focus{background-color:#3e3e3e!important;border-color:#242424!important}.character-button:focus:active{box-shadow:none!important}.character-button:hover{background-color:#242424!important;border-color:#1d1d1d!important}.character-button:active{background-color:#1d1d1d!important;border-color:#1d1d1d!important}.character-button>.badge{background-color:#565656}.card-title{font-family:Montserrat,sans-serif;font-weight:600}.deleted-scene{font-size:.75em;line-height:12px}.expandable-result{cursor:pointer}.collapse{display:block}.search-result-link{white-space:nowrap;font-size:.75em!important}.quote-list>tr{white-space:nowrap}.quote-list>tr:hover{background-color:#242424}.quote-text{white-space:normal}.quote-speaker{min-width:75px;padding-right:1em;font-weight:600;vertical-align:text-top;text-align:right;font-family:Montserrat,sans-serif}.card-footer{padding:.1em;font-size:.8em;color:grey}.mark,mark{padding:.02em;background-color:#d2ca00}.ais-Hits-item,.ais-InfiniteHits-item,.ais-InfiniteResults-item,.ais-Results-item{border:none;box-shadow:none}