From 8015466d3029d30aedf36e01488d0de24ae84d35 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sat, 2 May 2020 00:01:00 +0100
Subject: [PATCH] Add a basic story list

---
 package.json            |  1 +
 src/App.vue             | 15 ++++++++--
 src/views/StoryList.vue | 65 +++++++++++++++++++++++++++++++++++++++--
 3 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 40a436b..2be5299 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
diff --git a/src/App.vue b/src/App.vue
index 5a6c097..32b6377 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,17 +22,28 @@ export default {
 </script>
 
 <style lang="scss">
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
+
+  h1 {
+    padding-top: 20px;
+    font-size: 3rem;
+    font-weight: 300;
+  }
 }
+
 #page {
   margin: calc(60px + 10px) 5% 20px calc(10vw + 5%);
 }
+
 body {
   margin: 0;
+  background-color: #f7f6f4;
+  color: #333;
 }
 </style>
diff --git a/src/views/StoryList.vue b/src/views/StoryList.vue
index 6f08592..4549cb3 100644
--- a/src/views/StoryList.vue
+++ b/src/views/StoryList.vue
@@ -1,5 +1,66 @@
 <template>
-  <div class="about">
-    <h1>Story list here</h1>
+  <div class="story-list">
+    <h1>Stories</h1>
+    <div class="story" v-for="story in stories" :key="story.id">
+      <h3>
+        <a :href="'/story/' + story.id">{{ story.id }}. {{ story.title }}</a>
+      </h3>
+      <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
+    </div>
   </div>
 </template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'StoryListView',
+  data: function () {
+    return {
+      stories: []
+    }
+  },
+  created: function () {
+    this.getStories()
+  },
+  methods: {
+    getStories: function () {
+      const vm = this
+      axios.get('http://localhost:8080/v1/stories?limit=10')
+        .then(function (response) {
+          vm.stories = response.data
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.story {
+  padding: 20px;
+  border-top: solid 1px #ddd;
+
+  &:hover {
+    background-color: #fff;
+  }
+
+  a {
+    color: #c43422;
+    text-decoration: none;
+  }
+
+  h3 {
+    margin-top: 0;
+    font-size: 1.25em;
+    font-weight: 300;
+  }
+}
+
+.tag {
+  padding: 6px 12px;
+  margin: 0 5px;
+  background-color: #f0ad4e;
+  color: #f7f6f4;
+  border-radius: 20px;
+}
+</style>