From 18b44a3aebc56d32060e1d879a8f096eafbf262f Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 25 Jan 2020 18:54:05 +0100
Subject: Add image to PostLink

---
 components/Posts/PostLink.stories.js              | 13 +++++++--
 components/Posts/PostLink.vue                     | 34 +++++++++++++++++------
 components/Posts/PostList/PurePostList.stories.js | 15 +++++++---
 components/Posts/PostList/PurePostList.vue        |  9 +++---
 4 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'components/Posts')

diff --git a/components/Posts/PostLink.stories.js b/components/Posts/PostLink.stories.js
index 9b12c29..5fdfb6f 100644
--- a/components/Posts/PostLink.stories.js
+++ b/components/Posts/PostLink.stories.js
@@ -7,7 +7,9 @@ export const postLink = {
   title: 'Test PostLink',
   description:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.',
-  route: '/kronika/2019/20/11/test'
+  route: '/kronika/2019/20/11/test',
+  image:
+    'https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
 }
 
 storiesOf('Posts/PostLink', module)
@@ -16,6 +18,13 @@ storiesOf('Posts/PostLink', module)
     return {
       components: { PostLink },
       template: `<post-link :title="title" :description="description" :route="route"/>`,
-      data: () => postLink
+      data: () => postLink,
+    }
+  })
+  .add('with image', () => {
+    return {
+      components: { PostLink },
+      template: `<post-link :title="title" :description="description" :route="route" :image="image"/>`,
+      data: () => postLink,
     }
   })
diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue
index 8d0a669..5f7d5bf 100644
--- a/components/Posts/PostLink.vue
+++ b/components/Posts/PostLink.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="post-link">
     <a :href="route">
-      <div class="post-container">
-        <h4 class="post-title">{{ title }}</h4>
-        <p class="post-description">{{ shortenedDescription }}...</p>
+      <div>
+        <div class="image" :style="`background-image: url('${image}')`" />
+        <div class="post-container">
+          <h4 class="post-title">{{ title }}</h4>
+          <p class="post-description">{{ shortenedDescription }}...</p>
+        </div>
       </div>
     </a>
   </div>
@@ -15,23 +18,28 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     route: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
+    image: {
+      type: String,
+      required: false,
+      default: () => '/assets/og/default.jpg',
+    },
   },
   computed: {
     shortenedDescription() {
       const first30Words = this.description.split(' ').slice(0, 30)
       return first30Words.join(' ')
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -60,6 +68,7 @@ export default {
 .post-link .post-container {
   padding: 20px;
   height: 100%;
+  padding-top: 0;
 }
 
 .post-link .post-title {
@@ -71,4 +80,11 @@ export default {
   color: #484848;
   font-size: 0.9em;
 }
+
+.post-link .image {
+  height: 300px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 </style>
diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js
index e2c39de..0df4ce3 100644
--- a/components/Posts/PostList/PurePostList.stories.js
+++ b/components/Posts/PostList/PurePostList.stories.js
@@ -4,27 +4,34 @@ import { postLink } from '../PostLink.stories'
 
 import PurePostList from './PurePostList'
 
-export const posts = Array(5).fill(postLink)
+const postLinkNoImage = { ...postLink }
+delete postLinkNoImage['image']
+console.log(postLinkNoImage)
+
+export const posts = [
+  ...Array(3).fill(postLinkNoImage),
+  ...Array(5).fill(postLink),
+]
 
 storiesOf('Posts/PurePostList', module)
   .add('default', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts })
+      data: () => ({ posts }),
     }
   })
   .add('loading', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts" loading/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
   .add('no posts', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index ace069f..c87b9dc 100644
--- a/components/Posts/PostList/PurePostList.vue
+++ b/components/Posts/PostList/PurePostList.vue
@@ -12,6 +12,7 @@
           :route="post.route"
           :title="post.title"
           :description="post.description"
+          :image="post.image"
         />
       </div>
     </transition>
@@ -27,14 +28,14 @@ export default {
   props: {
     posts: {
       type: Array,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
       required: false,
-      default: () => false
-    }
-  }
+      default: () => false,
+    },
+  },
 }
 </script>
 
-- 
cgit 1.4.1


From 1aa3a88b21539aa06572d86324673baeddfbe46f Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 25 Jan 2020 19:41:39 +0100
Subject: Add image from meta

---
 components/Posts/PostList/index.js       |  7 ++++---
 components/Posts/PostList/parentMixin.js |  4 ++--
 package-lock.json                        | 12 ++++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'components/Posts')

diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
index 11d44ff..7e0b1f4 100644
--- a/components/Posts/PostList/index.js
+++ b/components/Posts/PostList/index.js
@@ -12,11 +12,12 @@ export const getPosts = async () => {
   }
 }
 
-export const parsePosts = posts =>
-  posts.map(post => ({
+export const parsePosts = (posts) =>
+  posts.map((post) => ({
     title: post.content.meta.title,
+    image: post.content.meta.image,
     description: post.content.description,
-    route: post.route
+    route: post.route,
   }))
 
 export default PostList
diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js
index e5b06ed..801d51c 100644
--- a/components/Posts/PostList/parentMixin.js
+++ b/components/Posts/PostList/parentMixin.js
@@ -3,7 +3,7 @@ import { getPosts } from './index'
 export default {
   async asyncData() {
     return {
-      posts: await getPosts()
+      posts: await getPosts(),
     }
-  }
+  },
 }
diff --git a/package-lock.json b/package-lock.json
index a1270a4..d079c1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5022,9 +5022,9 @@
       }
     },
     "@types/node": {
-      "version": "12.12.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.14.tgz",
-      "integrity": "sha512-u/SJDyXwuihpwjXy7hOOghagLEV1KdAST6syfnOk6QZAMzZuWZqXy5aYYZbh8Jdpd4escVFP0MvftHNDb9pruA=="
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.0.tgz",
+      "integrity": "sha512-Onhn+z72D2O2Pb2ql2xukJ55rglumsVo1H6Fmyi8mlU9SvKdBk/pUSUAiBY/d9bAOF7VVWajX3sths/+g6ZiAQ=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -5094,9 +5094,9 @@
       "dev": true
     },
     "@types/tough-cookie": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.5.tgz",
-      "integrity": "sha512-SCcK7mvGi3+ZNz833RRjFIxrn4gI1PPR3NtuIS+6vMkvmsGjosqTJwRt5bAEFLRz+wtJMWv8+uOnZf2hi2QXTg=="
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.6.tgz",
+      "integrity": "sha512-wHNBMnkoEBiRAd3s8KTKwIuO9biFtTf0LehITzBhSco+HQI0xkXZbLOD55SW3Aqw3oUkHstkm5SPv58yaAdFPQ=="
     },
     "@types/webpack-env": {
       "version": "1.14.1",
-- 
cgit 1.4.1


From 03b8bea02076f8eceddded0a096026125e5e7ca1 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 25 Jan 2020 20:16:01 +0100
Subject: Fix empty images

---
 components/GoogleDriveLink.vue                   | 10 +++++-----
 components/Posts/PostLink.vue                    |  1 +
 pages/kronika/_year/_month/_day/_title/index.vue |  4 +++-
 3 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'components/Posts')

diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index c54c630..ada6eff 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -6,7 +6,7 @@
     <div class="text">
       <p v-html="text"></p>
     </div>
-    <a :href="link">
+    <a :href="link" target="_blank" rel="noopener">
       <plain-button text="Przejdź" />
     </a>
   </div>
@@ -21,13 +21,13 @@ export default {
   props: {
     text: {
       type: String,
-      required: true
+      required: true,
     },
     link: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
 </script>
 
diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue
index 5f7d5bf..3f80bae 100644
--- a/components/Posts/PostLink.vue
+++ b/components/Posts/PostLink.vue
@@ -86,5 +86,6 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+  box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25);
 }
 </style>
diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue
index ed9eab7..331ed7a 100644
--- a/pages/kronika/_year/_month/_day/_title/index.vue
+++ b/pages/kronika/_year/_month/_day/_title/index.vue
@@ -6,6 +6,7 @@
     </div>
     <section v-else class="article">
       <img
+        v-if="attributes.image"
         :src="attributes.image"
         :alt="attributes.title"
         :title="attributes.title"
@@ -79,7 +80,8 @@ export default {
 }
 .article img {
   width: 100%;
-  border-radius: 5px;
+  /*border-radius: 5px;*/
+  box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25);
 }
 
 .article h1 {
-- 
cgit 1.4.1


From 32adaba2ded83ab0d69ebeb4d1d839476d94c476 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 25 Jan 2020 22:30:27 +0100
Subject: Remove console log

---
 components/Posts/PostList/PurePostList.stories.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'components/Posts')

diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js
index 0df4ce3..a159982 100644
--- a/components/Posts/PostList/PurePostList.stories.js
+++ b/components/Posts/PostList/PurePostList.stories.js
@@ -6,7 +6,6 @@ import PurePostList from './PurePostList'
 
 const postLinkNoImage = { ...postLink }
 delete postLinkNoImage['image']
-console.log(postLinkNoImage)
 
 export const posts = [
   ...Array(3).fill(postLinkNoImage),
-- 
cgit 1.4.1