Add style to list of posts

4 files changed, 102 insertions, 5 deletions

diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue
new file mode 100644
index 0000000..7b2c527
--- /dev/null
+++ b/components/ChroniclePost.vue
@@ -0,0 +1,60 @@
+<template>
+  <a :href="route" class="post">
+    <div>
+      <h4 class="post-title">{{title}}</h4>
+      <p class="post-description">{{shortenedDescription}}...</p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'ChroniclePost',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    route: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    shortenedDescription() {
+      const first30Words = this.description.split(' ').slice(0, 30)
+      return first30Words.join(' ')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post {
+  margin: 20px;
+  flex-basis: 410px;
+  text-decoration: none;
+}
+
+.post > div {
+  background: #ffffff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  padding: 20px;
+
+  text-align: left;
+}
+
+.post-title {
+  color: #181818;
+  font-size: 1.3em;
+}
+
+.post-description {
+  color: #484848;
+  font-size: 0.9em;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 7f9ec5b..496f1ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,9 +23,10 @@ export default {
       routes: [
         { path: '/', name: 'Strona główna' },
         { path: '/download', name: 'Do pobrania' },
-        { path: '/kontakt', name: 'Kontakt' }
+        { path: '/kontakt', name: 'Kontakt' },
+        { path: '/kronika', name: 'Kronika' }
       ],
-      staticRoutes: [{ path: '/kronika', name: 'Kronika' }],
+      staticRoutes: [],
       externalRoutes: [
         // {
         //   path: 'https://kronika-puszcza.netlify.com',
diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue
index 361b7f8..1308eb7 100644
--- a/pages/kronika/_year/_month/_day/_title/index.vue
+++ b/pages/kronika/_year/_month/_day/_title/index.vue
@@ -7,7 +7,7 @@
     <div v-else class="article">
       <!-- <h1>{{ params.title }}</h1>
       <span>{{ `${params.year}-${params.month}-${params.day}` }}</span>-->
-      <div class="content" v-html="content"></div>
+      <article class="content" v-html="content"></article>
     </div>
   </div>
 </template>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 4bb6910..f61e615 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,18 +1,54 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <a v-for="(post, index) in posts" :key="index" :href="post.route">{{post.content.meta.title}}</a>
+    <div class="post-list">
+      <chronicle-post
+        v-for="(post, index) in posts"
+        :key="index"
+        :route="post.route"
+        :title="post.content.meta.title"
+        :description="post.content.description"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import ChroniclePost from '~/components/ChroniclePost'
 import k from '~/api'
 
+const URL = process.env.DEPLOY_URL || 'http://localhost:8080'
+
 export default {
+  components: {
+    ChroniclePost
+  },
   async asyncData() {
     return {
       posts: k.getPosts()
     }
+  },
+  mounted() {
+    this.getPosts()
+  },
+  methods: {
+    getPosts() {
+      if (this.posts.length < 1) {
+        this.$axios
+          .get(`${URL}/api/posts.json`)
+          .then(r => (this.posts = r.data))
+      }
+      console.log(this.posts)
+    }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.post-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 900px;
+}
+</style>
\ No newline at end of file