From 34ef9db62694bfc70b8eadaa90a0ce6e39c5dd07 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 22 May 2022 01:09:16 -0500
Subject: [PATCH] Add a basic about screen

---
 src/App.vue              |  2 +-
 src/components/About.vue | 55 ++++++++++++++++++++++++++++++++++++++++
 src/router.js            |  6 +++++
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/About.vue

diff --git a/src/App.vue b/src/App.vue
index 27052d6..70c6971 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,7 +22,7 @@
                             </router-link>
                         </b-nav-item>
                         <b-nav-item href="#">
-                            <router-link :to="{ name: 'Home' }" class="no-link">
+                            <router-link :to="{ name: 'About' }" class="no-link">
                                 About
                             </router-link>
                         </b-nav-item>
diff --git a/src/components/About.vue b/src/components/About.vue
new file mode 100644
index 0000000..dc8f79e
--- /dev/null
+++ b/src/components/About.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <b-breadcrumb :items="breadcrumbs" />
+        <b-card>
+            <h3>What is this?</h3>
+            <p>
+                This app is a quote viewing and searching app centered around the hit workplace comedy
+                and sitcom 'The Office'. I made it in order to learn Vue, API creation and a variety of
+                techniques and frameworks. Since inception, it's evolved and improved from something simple to
+                a passion project where I have poured a great deal of work into.
+            </p>
+            <h3>How does it work?</h3>
+            <p>
+                Most of the UI is self-explanatory and designed to be easy to use.
+            </p>
+            <ul>
+                <li>
+                    You can select episodes with the drop-down based selector on the left.
+                </li>
+                <li>
+                    You can search for quotes with the search bar at the top left.
+                </li>
+                <li>
+                    You can browse characters by clicking the 'Characters' link at the top or by finding
+                    and clicking on individual characters inside the episodes themselves.
+                </li>
+            </ul>
+            <h3>I found an error in the quotes, how can I help fix it?</h3>
+            <p>
+                Currently, this part of the application is rather difficult to explain the workings of.
+                There will be a system in place to explain how errors can be amended and taken care of,
+                but that will be explained and added later once I have time.
+                For now, please open a new issue on <a href="https://github.com/Xevion/the-office/issues/new">the github</a>.
+            </p>
+        </b-card>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "About",
+    computed: {
+        breadcrumbs() {
+            return [
+                {text: 'Home', to: {name: 'Home'}},
+                {text: 'About', active: true}
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router.js b/src/router.js
index 2201957..2833881 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,6 +6,7 @@ import SearchResults from "@/components/SearchResults.vue";
 import Character from "@/components/Character.vue";
 import Season from "@/components/Season.vue";
 import Characters from "@/components/Characters";
+import About from "@/components/About";
 
 Vue.use(Router);
 
@@ -17,6 +18,11 @@ export default new Router({
             name: "Home",
             component: Home,
         },
+        {
+            path: "/about/",
+            name: "About",
+            component: About,
+        },
         {
             path: "/characters/",
             name: "Characters",