Show release history

src/components/NavHeader/NavHeader.vue

@@ -9,28 +9,39 @@
             GAMEBRARY
         </router-link>
 
-        <modal
-            title="Settings"
-            :show-close="false"
-            v-if="user"
-        >
-            <button>
-                <i class="fas fa-cog" />
-            </button>
+        <div class="links" v-if="user">
+            <modal title="Releases" large :show-close="false">
+                <button class="info filled small">
+                    <i class="fas fa-bullhorn" />
+                </button>
 
-            <settings slot="content" v-if="settings" />
-        </modal>
+                <releases slot="content" />
+            </modal>
+
+            <modal
+                title="Settings"
+                :show-close="false"
+            >
+                <button class="info filled small">
+                    <i class="fas fa-cog" />
+                </button>
+
+                <settings slot="content" v-if="settings" />
+            </modal>
+        </div>
     </nav>
 </template>
 
 <script>
 import Settings from '@/components/Settings/Settings';
+import Releases from '@/components/Releases/Releases';
 import Modal from '@/components/Modal/Modal';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
     components: {
         Settings,
+        Releases,
         Modal,
     },
 
@@ -67,12 +78,14 @@ export default {
         justify-content: space-between;
         align-items: center;
         background: $color-white;
+        padding: 0 $gp;
 
         .logo {
             height: $navHeight;
             font-weight: bold;
             display: flex;
             align-items: center;
+            margin-left: -$gp;
 
             img {
                 height: 24px;
@@ -84,6 +97,11 @@ export default {
             background: $color-darkest-gray;
             color: $color-gray !important;
         }
+
+        .links {
+            display: flex;
+            align-items: center;
+        }
     }
 </style>
 

src/components/Releases/Releases.vue

@@ -0,0 +1,80 @@
+<template lang="html">
+    <div class="releases">
+        <div class="release" v-for="notification in releases" :key="notification.id">
+            <div class="release-info">
+                <a class="link primary small hollow">
+                    {{ notification.tag_name }}
+                </a>
+
+                <div>
+                    <h3>{{ notification.name }}</h3>
+                    <small>Published {{ moment(notification.published_at).fromNow() }}</small>
+                </div>
+            </div>
+
+            <vue-markdown :source="notification.body" />
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import VueMarkdown from 'vue-markdown';
+import { mapState } from 'vuex';
+
+export default {
+    components: {
+        VueMarkdown,
+    },
+
+    data() {
+        return {
+            moment,
+        };
+    },
+
+    computed: {
+        ...mapState(['releases']),
+    },
+
+    mounted() {
+        this.$store.dispatch('LOAD_RELEASES')
+            .catch(() => {
+                this.$bus.$emit('TOAST', { message: 'Error loading releases', type: 'error' });
+            });
+    },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+    @import "~styles/styles.scss";
+
+    .release {
+        margin-bottom: $gp;
+        border-bottom: 1px solid $color-light-gray;
+        font-size: 12px;
+        padding: $gp 0;
+
+        .release-info {
+            display: grid;
+            grid-gap: $gp / 2;
+            grid-template-columns: 50px auto;
+
+            a {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        h3 {
+            margin: 0;
+        }
+    }
+</style>
+
+<style lang="scss" rel="stylesheet/scss">
+    .releases img {
+        max-width: 100%;
+    }
+</style>

src/store/actions.js

@@ -13,6 +13,16 @@ export default {
         });
     },
 
+    LOAD_RELEASES({ commit }) {
+        return new Promise((resolve, reject) => {
+            axios.get('https://api.github.com/repos/romancmx/gamebrary/releases')
+                .then(({ data }) => {
+                    commit('SET_RELEASES', data);
+                    resolve();
+                }).catch(reject);
+        });
+    },
+
     LOAD_PUBLIC_GAMES({ commit }, gameList) {
         return new Promise((resolve, reject) => {
             axios.get(`${FIREBASE_URL}/games?games=${gameList}`)

src/store/mutations.js

@@ -18,6 +18,10 @@ export default {
         state.gameLists = lists;
     },
 
+    SET_RELEASES(state, releases) {
+        state.releases = releases;
+    },
+
     CLEAR_SESSION(state) {
         state.user = null;
         state.authorizing = false;