dark theme hyperlink color, more reformatting, add navbar + insightsClient to AIS, basic Vuex, VueClipboard import, Router beforeEach guard (currently unused)

client/package-lock.json

@@ -3417,6 +3417,16 @@
       "integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.3.0.tgz?cache=0&sync_timestamp=1584603949505&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclipboardy%2Fdownload%2Fclipboardy-2.3.0.tgz",
@@ -4436,6 +4446,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -5990,6 +6005,14 @@
         "slash": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz?cache=0&sync_timestamp=1588087063358&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.4.tgz",
@@ -9938,6 +9961,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -10964,6 +10992,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -11474,6 +11507,14 @@
       "resolved": "https://registry.npmjs.org/vue-autosuggest/-/vue-autosuggest-2.2.0.tgz",
       "integrity": "sha512-cHgEakpoRUOaqXXEo8RcRrbSTM3eAaCu9b55ZXiKbaS6IUD8ewqffQrMy/A1DXqHSQbyEEGui4oAsCbRge29Jg=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",

client/package.json

@@ -19,6 +19,7 @@
         "instantsearch.css": "7.1.0",
         "vue": "^2.6.11",
         "vue-autosuggest": "^2.2.0",
+        "vue-clipboard2": "^0.3.1",
         "vue-instantsearch": "^3.1.0",
         "vue-loading-skeleton": "^1.1.9",
         "vue-router": "^3.2.0",

client/src/App.vue

@@ -1,10 +1,39 @@
 <template>
     <div id="app">
-        <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
+        <b-navbar>
-            <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+            <b-navbar-brand>
+                <router-link :to="{ name: 'Home' }" class="no-link">
+                    The Office Quotes
+                </router-link>
+            </b-navbar-brand>
+            <b-collapse id="nav-collapse" is-nav>
+                <b-navbar-nav>
+                    <b-nav-item href="#">
+                        <router-link :to="{ name: 'Home' }" class="no-link">
+                            Home
+                        </router-link>
+                    </b-nav-item>
+                    <b-nav-item href="#">
+                        <router-link :to="{ name: 'Home' }" class="no-link">
+                            About
+                        </router-link>
+                    </b-nav-item>
+                </b-navbar-nav>
+            </b-collapse>
+        </b-navbar>
+        <ais-instant-search
+            index-name="prod_THEOFFICEQUOTES"
+            :search-client="searchClient"
+            :insights-client="insightsClient"
+        >
+            <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
                 <b-row class="my-3 pl-1">
                     <b-col lg="3" xl="2" md="12">
-                        <ais-search-box @keydown.native="showResults" ref="searchbox" placeholder="Search here…"/>
+                        <ais-search-box
+                            @keydown.native="showResults"
+                            ref="searchbox"
+                            placeholder="Search here…"
+                        />
                     </b-col>
                 </b-row>
                 <b-row>
@@ -17,16 +46,35 @@
                     <b-col md="0" lg="0" xl="2"></b-col>
                 </b-row>
             </b-container>
+            <ais-configure :clickAnalytics="true" />
         </ais-instant-search>
     </div>
 </template>
 
 <style lang="scss">
 @import "assets/scss/_variables";
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
+@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');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
-    body { background-color: $grey-0; font-family: 'Roboto', sans-serif; }
+body {
+    background-color: $grey-0;
+    font-family: "Roboto", sans-serif;
+}
+
+.navbar {
+    background-color: $grey-2;
+}
+
+.navbar-brand {
+    font-family: "Poppins", sans-serif;
+    font-size: 1.4em;
+    color: $grey-11 !important;
+}
+
+.nav-link {
+    color: $grey-9 !important;
+}
 
 .ais-SearchBox-form {
     border: none;
@@ -39,23 +87,25 @@
     border-radius: 1px;
 }
 
-    .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon {
+.ais-SearchBox-submitIcon,
-        > path { fill: $grey-9; }
+.ais-SearchBox-resetIcon {
+    > path {
+        fill: $grey-9;
+    }
 }
 
 .ais-SearchBox-input::placeholder {
     color: white;
 }
-
 </style>
 
 <script>
-import algoliasearch from 'algoliasearch/lite';
+import algoliasearch from "algoliasearch/lite";
-import SeasonList from './components/SeasonList.vue';
+import SeasonList from "./components/SeasonList.vue";
-import 'instantsearch.css/themes/algolia-min.css';
+import "instantsearch.css/themes/algolia-min.css";
 
 export default {
-  name: 'App',
+    name: "App",
     components: {
         SeasonList,
     },
@@ -63,14 +113,18 @@ export default {
         return {
             searchClient: algoliasearch(
                 process.env.VUE_APP_ALGOLIA_APP_ID,
-        process.env.VUE_APP_ALGOLIA_API_KEY,
+                process.env.VUE_APP_ALGOLIA_API_KEY
             ),
+            insightsClient: window.aa,
         };
     },
     methods: {
         showResults() {
-      if (this.$refs.searchbox.currentRefinement !== '' && this.$route.path !== '/search_results') {
+            if (
-        this.$router.push({ name: 'SearchResults' });
+                this.$refs.searchbox.currentRefinement !== "" &&
+                this.$route.path !== "/search_results"
+            ) {
+                this.$router.push({name: "SearchResults"});
             }
         },
     },

client/src/components/Character.vue

@@ -3,20 +3,28 @@
         <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
         <b-card>
             <h4 v-if="character">{{ this.$route.params.character }}</h4>
-            <Skeleton v-else style="max-width: 30%;"></Skeleton>
+            <Skeleton v-else style="max-width: 30%"></Skeleton>
         </b-card>
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import "../assets/scss/_variables";
-.card-body h4, .breadcrumb-item.active {
+
+.card-body h4,
+.breadcrumb-item.active {
     text-transform: capitalize;
 }
 
 .skeleton {
     min-height: 24px;
 }
+a {
+    color: #1296ff;
+    &:hover {
+        color: #007fe0;
+    }
+}
 
 .breadcrumb-item + .breadcrumb-item::before {
     color: $grey-10;
@@ -25,6 +33,7 @@
 .breadcrumb {
     background-color: $grey-3;
     border-radius: 0;
+
     .breadcrumb-item {
         color: $grey-10;
     }
@@ -55,7 +64,10 @@ export default {
                     to: {name: 'Home'},
                 },
                 {
-          text: this.character !== null ? this.character.name : this.$route.params.character,
+                    text:
+                        this.character !== null
+                            ? this.character.name
+                            : this.$route.params.character,
                     active: true,
                 },
             ];

client/src/components/CharacterList.vue

@@ -1,8 +1,15 @@
 <template>
-    <div class="pt-2" v-if="characters" :fluid=true>
+    <div class="pt-2" v-if="characters" :fluid="true">
-        <b-button squared class="mx-2 my-1 character-button" size="sm"
+        <b-button
-                  v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
+            squared
-                  :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
+            class="mx-2 my-1 character-button"
+            size="sm"
+            v-for="character in characters"
+            :key="character.name"
+            :id="`character-${character.id}`"
+            :title="`${character.appearances} Quote${
+        character.appearances > 1 ? 's' : ''
+      }`"
             :to="{ name: 'Character', params: { character: character.id } }"
         >
             {{ character.name }}
@@ -16,13 +23,17 @@
 
 .btn {
     box-shadow: none;
-        &:focus { box-shadow: none; }
+
+    &:focus {
+        box-shadow: none;
+    }
 }
 
 .character-button {
     color: $grey-10;
     background-color: $grey-4;
     border-color: $grey-3;
+
     .badge {
         color: lighten($grey-11, 8%);
     }
@@ -33,7 +44,9 @@
         background-color: $grey-6 !important;
         border-color: $grey-4 !important;
 
-            &:active { box-shadow: none !important;}
+        &:active {
+            box-shadow: none !important;
+        }
     }
 
     &:hover {
@@ -66,7 +79,7 @@
 
 <script>
 export default {
-  name: 'CharacterList',
+    name: "CharacterList",
-  props: ['characters'],
+    props: ["characters"],
 };
 </script>

client/src/components/Episode.vue

@@ -1,19 +1,37 @@
 <template>
     <div>
-        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
+        <b-card
-        - ${episode != null ? episode.title : ''}`" class="mb-4">
+            :title="`Season ${this.$route.params.season} Episode ${
+        this.$route.params.episode
+      } \
+        - ${episode != null ? episode.title : ''}`"
+            class="mb-4"
+        >
       <span v-if="episode">
         {{ episode.description }}
       </span>
-            <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
+            <CharacterList
+                v-if="episode && episode.characters"
+                :characters="episode.characters"
+            ></CharacterList>
         </b-card>
         <div v-if="episode != null">
-            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
+            <b-card
-                    class="mb-1" body-class="p-0">
+                v-for="(scene, sceneIndex) in episode.scenes"
+                :key="`scene-${sceneIndex}`"
+                class="mb-1"
+                body-class="p-0"
+            >
                 <b-card-text class="my-2">
-                    <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
+                    <QuoteList
-                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
+                        :quotes="scene.quotes"
-                          :footer="`Deleted Scene ${scene.deleted}`">
+                        :sceneIndex="sceneIndex"
+                    ></QuoteList>
+                    <span
+                        v-if="scene.deleted"
+                        class="mt-n2 mb-4 text-muted deleted-scene pl-2"
+                        :footer="`Deleted Scene ${scene.deleted}`"
+                    >
             Deleted Scene {{ scene.deleted }}
           </span>
                 </b-card-text>
@@ -24,7 +42,7 @@
 
 <style lang="scss">
 .card-title {
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
     font-weight: 600;
 }
 
@@ -35,12 +53,12 @@
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
-import QuoteList from './QuoteList.vue';
+import QuoteList from "./QuoteList.vue";
-import CharacterList from './CharacterList.vue';
+import CharacterList from "./CharacterList.vue";
 
 export default {
-  name: 'Episode',
+    name: "Episode",
     components: {
         QuoteList,
         CharacterList,
@@ -52,16 +70,17 @@ export default {
     },
     methods: {
         getEpisode() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/episode/\
+            const path = `${process.env.VUE_APP_API_URL}/api/episode/\
 ${this.$route.params.season}/${this.$route.params.episode}/`;
-      axios.get(path)
+            axios
+                .get(path)
                 .then((res) => {
                     this.episode = res.data;
                     // Scroll
                     if (this.$route.hash) {
                         this.$nextTick(() => {
                             const section = document.getElementById(this.$route.hash.substring(1));
-              this.$scrollTo(section, 500, { easing: 'ease-in' });
+                            this.$scrollTo(section, 500, {easing: "ease-in"});
                         });
                     }
                 })

client/src/components/Home.vue

@@ -1,8 +1,9 @@
 <template>
     <b-card title="The Office Quotes">
         <b-card-text>
-            A Vue.js application serving you {{ stats.totals.quote }} quotes from your favorite show - The Office.
+            A Vue.js application serving you {{ stats.totals.quote }} quotes from your
-            <br>
+            favorite show - The Office.
+            <br/>
             Click on a Season and Episode on the left-hand sidebar to view quotes.
             Search for quotes with the instant searchbox.
         </b-card-text>
@@ -21,10 +22,10 @@
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-  name: 'Home',
+    name: "Home",
     data() {
         return {
             stats: null,
@@ -32,8 +33,9 @@ export default {
     },
     methods: {
         getStats() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/stats/`;
+            const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
-      axios.get(path)
+            axios
+                .get(path)
                 .then((res) => {
                     this.stats = res.data;
                 })

client/src/components/SearchResult.vue

@@ -1,9 +1,19 @@
 <template>
-    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
+    <b-card
-            v-on:mouseover="hover" v-on:click="toggleExpansion" :class="[expanded ? 'expanded' : '']">
+        class="mb-1"
+        body-class="p-0 expandable-result"
+        footer-class="my-1"
+        v-on:mouseover="hover"
+        v-on:click="toggleExpansion"
+        :class="[expanded ? 'expanded' : '']"
+    >
         <b-card-text class="mu-2 py-1 mb-1">
             <table v-if="expanded" class="quote-list px-3 py-1 w-100">
-                <tr v-for="(quote, index) in above" class="secondary" :key="`quote-a-${index}`">
+                <tr
+                    v-for="(quote, index) in above"
+                    class="secondary"
+                    :key="`quote-a-${index}`"
+                >
                     <td class="quote-speaker my-3 pl-3">
                         <div>{{ quote.speaker }}</div>
                     </td>
@@ -12,10 +22,20 @@
                     </td>
                 </tr>
                 <tr>
-                    <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
+                    <td
-                    <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
+                        class="quote-speaker my-3 pl-3"
+                        v-html="item._highlightResult.speaker.value"
+                    ></td>
+                    <td
+                        class="quote-text w-100 pr-3"
+                        v-html="item._highlightResult.text.value"
+                    ></td>
                 </tr>
-                <tr v-for="(quote, index) in below" class="secondary" :key="`quote-b-${index}`">
+                <tr
+                    v-for="(quote, index) in below"
+                    class="secondary"
+                    :key="`quote-b-${index}`"
+                >
                     <td class="quote-speaker my-3 pl-3">
                         <div>{{ quote.speaker }}</div>
                     </td>
@@ -26,14 +46,27 @@
             </table>
             <table v-else class="quote-list px-3 py-1 w-100">
                 <tr>
-                    <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
+                    <td
-                    <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
+                        class="quote-speaker my-3 pl-3"
+                        v-html="item._highlightResult.speaker.value"
+                    ></td>
+                    <td
+                        class="quote-text w-100 pr-3"
+                        v-html="item._highlightResult.text.value"
+                    ></td>
                 </tr>
             </table>
-            <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+            <router-link
-                         :to="{ name: 'Episode', params: { season: item.season, episode: item.episode_rel },
+                v-if="expanded"
-                         hash: `#${item.section_rel - 1}-${item.quote_rel - 1}` }">
+                class="no-link search-result-link w-100 text-muted mb-2 ml-2"
-                Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }}
+                :to="{
+          name: 'Episode',
+          params: { season: item.season, episode: item.episode_rel },
+          hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`,
+        }"
+            >
+                Season {{ item.season }} Episode {{ item.episode_rel }} Scene
+                {{ item.section_rel }}
             </router-link>
         </b-card-text>
     </b-card>
@@ -73,15 +106,15 @@
     font-weight: 600;
     vertical-align: text-top;
     text-align: right;
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
 }
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-  props: ['item'],
+    props: ["item"],
     data() {
         return {
             expanded: false,
@@ -112,9 +145,10 @@ export default {
             }
         },
         fetchQuotes() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/quote_surround?season=\
+            const path = `${process.env.VUE_APP_API_URL}/api/quote_surround?season=\
 ${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;
-      axios.get(path)
+            axios
+                .get(path)
                 .then((res) => {
                     this.above = res.data.above;
                     this.below = res.data.below;

client/src/main.js

@@ -1,19 +1,29 @@
-import 'bootstrap/dist/css/bootstrap.css';
+import "bootstrap/dist/css/bootstrap.css";
-import Vue from 'vue';
+import Vue from "vue";
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import {BootstrapVue, BootstrapVueIcons} from "bootstrap-vue";
-import InstantSearch from 'vue-instantsearch';
+import InstantSearch from "vue-instantsearch";
-import VueScrollTo from 'vue-scrollto';
+import VueClipboard from 'vue-clipboard2'
-import App from './App.vue';
+import VueScrollTo from "vue-scrollto";
-import router from './router';
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
 
 Vue.use(VueScrollTo);
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
 Vue.use(InstantSearch);
+Vue.use(VueClipboard)
 
 Vue.config.productionTip = false;
 
+router.beforeEach((to, from, next) => {
+    // eslint-disable-next-line no-constant-condition
+    if (from.name !== null && to.name === "Character" && false) next(false);
+    else next();
+});
+
 new Vue({
     router,
+    store,
     render: (h) => h(App),
-}).$mount('#app');
+}).$mount("#app");

client/src/store.js

@@ -0,0 +1,12 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        episodeCount: [6, 22, 23, 14, 26, 24, 24, 24, 23]
+    },
+    mutations: {},
+    actions: {},
+});