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

2025-12-10 02:08:48 -06:00 · 2020-09-07 23:46:06 -05:00
parent a0d7a78f73
commit c0305ef414
10 changed files with 463 additions and 265 deletions
--- a/client/package-lock.json
+++ b/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",
--- a/client/package.json
+++ b/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",
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,10 +1,39 @@
 <template>
    <div id="app">
-        <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
-            <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+        <b-navbar>
+            <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=Roboto:wght@400;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=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 {
-        > path { fill: $grey-9; }
+.ais-SearchBox-submitIcon,
+.ais-SearchBox-resetIcon {
+    > path {
+        fill: $grey-9;
+    }
 }

 .ais-SearchBox-input::placeholder {
    color: white;
 }
-
 </style>

 <script>
-import algoliasearch from 'algoliasearch/lite';
-import SeasonList from './components/SeasonList.vue';
-import 'instantsearch.css/themes/algolia-min.css';
+import algoliasearch from "algoliasearch/lite";
+import SeasonList from "./components/SeasonList.vue";
+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') {
-        this.$router.push({ name: 'SearchResults' });
+            if (
+                this.$refs.searchbox.currentRefinement !== "" &&
+                this.$route.path !== "/search_results"
+            ) {
+                this.$router.push({name: "SearchResults"});
            }
        },
    },
--- a/client/src/components/Character.vue
+++ b/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,
                },
            ];
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -1,8 +1,15 @@
 <template>
-    <div class="pt-2" v-if="characters" :fluid=true>
-        <b-button squared 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' : ''}`"
+    <div class="pt-2" v-if="characters" :fluid="true">
+        <b-button
+            squared
+            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',
-  props: ['characters'],
+    name: "CharacterList",
+    props: ["characters"],
 };
 </script>
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -1,19 +1,37 @@
 <template>
    <div>
-        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
-        - ${episode != null ? episode.title : ''}`" class="mb-4">
+        <b-card
+            :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}`"
-                    class="mb-1" body-class="p-0">
+            <b-card
+                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>
-                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
-                          :footer="`Deleted Scene ${scene.deleted}`">
+                    <QuoteList
+                        :quotes="scene.quotes"
+                        :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 QuoteList from './QuoteList.vue';
-import CharacterList from './CharacterList.vue';
+import axios from "axios";
+import QuoteList from "./QuoteList.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"});
                        });
                    }
                })
--- a/client/src/components/Home.vue
+++ b/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.
-            <br>
+            A Vue.js application serving you {{ stats.totals.quote }} quotes from your
+            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/`;
-      axios.get(path)
+            const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
+            axios
+                .get(path)
                .then((res) => {
                    this.stats = res.data;
                })
--- a/client/src/components/SearchResult.vue
+++ b/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"
-            v-on:mouseover="hover" v-on:click="toggleExpansion" :class="[expanded ? 'expanded' : '']">
+    <b-card
+        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 class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
+                    <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 class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
+                    <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"
-                         :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
+                v-if="expanded"
+                class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+                :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;
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,19 +1,29 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import Vue from 'vue';
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
-import InstantSearch from 'vue-instantsearch';
-import VueScrollTo from 'vue-scrollto';
-import App from './App.vue';
-import router from './router';
+import "bootstrap/dist/css/bootstrap.css";
+import Vue from "vue";
+import {BootstrapVue, BootstrapVueIcons} from "bootstrap-vue";
+import InstantSearch from "vue-instantsearch";
+import VueClipboard from 'vue-clipboard2'
+import VueScrollTo from "vue-scrollto";
+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");
--- a/client/src/store.js
+++ b/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: {},
+});