Add base components

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.4",
+    "@fortawesome/fontawesome-free-brands": "^5.0.7",
     "@fortawesome/fontawesome-free-solid": "^5.0.7",
     "@fortawesome/vue-fontawesome": "^0.0.22",
     "bulma": "^0.6.2",

src/App.vue

@@ -1,23 +1,19 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <header-bar/>
     <router-view/>
+    <app-footer/>
   </div>
 </template>
 
 <script>
+import HeaderBar from '@/components/HeaderBar'
+import AppFooter from '@/components/AppFooter'
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    HeaderBar,
+    AppFooter
+  }
 }
 </script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/components/AppFooter.vue

@@ -0,0 +1,53 @@
+<template>
+  <footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        <strong>Stardew Community Checklist</strong> by <a href="http://johncleaver.com">John Cleaver</a>. The source code is licensed
+        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+      </p>
+      <p>
+        Bundle and Item information is from the <a href="http://stardewvalleywiki.com/Stardew_Valley_Wiki">Stardew Valley Wiki</a>
+        and is used under the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
+      </p>
+      <p>
+        <a href="http://stardewvalley.net/">Stardew Valley</a> &copy; <a href="https://chucklefish.org/">Chucklefish LTD</a>.
+        Developed by <a href="https://twitter.com/ConcernedApe">ConcernedApe</a>.
+      </p>
+      <p>
+        <a :href="gh_address"><font-awesome-icon :icon="gh_icon"/></a>
+        <a :href="reddit_address"><font-awesome-icon :icon="reddit_icon"/></a>
+      </p>
+    </div>
+  </div>
+</footer>
+</template>
+
+<script>
+import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
+import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
+export default {
+  name: 'app-footer',
+  components: {
+    'font-awesome-icon': FontAwesomeIcon
+  },
+  computed: {
+    gh_icon () {
+      return faGithub
+    },
+    reddit_icon () {
+      return faReddit
+    }
+  },
+  data: function () {
+    return {
+      gh_address: 'https://github.com/kihashi/stardew_community_checklist',
+      reddit_address: 'https://www.reddit.com/r/StardewValley/comments/4ell1b/stardew_community_checklist_a_site_to_keep_track/'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/HeaderBar.vue

@@ -0,0 +1,45 @@
+<template>
+  <section class="hero is-info is-bold">
+      <nav class="navbar">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="/">
+            <h1 class="title">Stardew Community Checklist</h1>
+          </a>
+          <div class="navbar-burger"
+               v-bind:class="{ 'is-active': menu_active }"
+               @click="menu_active = !menu_active"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+        <div class="navbar-menu"
+          v-bind:class="{ 'is-active': menu_active }">
+          <div class="navbar-end">
+            <router-link v-for="route in this.$router.options.routes"
+                         :key="route.order"
+                         class="navbar-item"
+                         v-bind:class="{ 'is-active': menu_active }"
+                         :to="route">
+              {{route.name}}
+            </router-link>
+          </div>
+        </div>
+      </nav>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'header-bar',
+  data: function () {
+    return {
+      menu_active: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/Welcome.vue

@@ -0,0 +1,21 @@
+<template>
+    <section class="hero is-success is-medium is-bold">
+      <div class="hero-body">
+        <h1 class="title">
+          Stardew Community Checklist
+        </h1>
+        <h2 class="subtitle">
+          Track Your Progress on the Community Center!
+        </h2>
+      </div>
+    </section>
+</template>
+
+<script>
+export default {
+  name: 'welcome'
+}
+</script>
+
+<style scoped>
+</style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Welcome from '@/components/Welcome'
 
 Vue.use(Router)
 
@@ -8,8 +8,9 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'Welcome',
+      component: Welcome
     }
-  ]
+  ],
+  linkExactActiveClass: 'is-active'
 })

yarn.lock

@@ -75,6 +75,12 @@
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.3.tgz#8475e0f2d1ad1f858c4ec2e76ed9a2456a09ad83"
 
+"@fortawesome/fontawesome-free-brands@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.7.tgz#0fe131da1bfb7f5f49b7b800b9e198e530fab418"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.3"
+
 "@fortawesome/fontawesome-free-solid@^5.0.7":
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.7.tgz#b7e68876a24b3a0a34c09ee68bd57fe63925a578"