:sparkles: using card component in list pages

vue-theme/src/components/card.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+.card(v-if="content")
+    router-link(:to="`/${type}`")
+        p.t-up {{type}}
+    .card--info(:class="{ 'wide': wide }")
+        router-link(:to="`/${type}/${content.slug}`")
+            featured-image(:post="content")
+        .f-col.w-max
+            router-link(:to="`/${type}/${content.slug}`")
+                h1.t-up.t-cntr {{ content.title }}
+            p {{ content.excerpt }}
+</template>
+
+<script>
+import featuredImage from '@/components/featured-image'
+export default {
+    components: { featuredImage },
+    props: ['type', 'content', 'wide']
+}
+</script>
+
+<style lang="postcss">
+@import '../sss/variables.sss'
+@import '../sss/theme.sss'
+.card
+    padding: $ms--3 $ms--1
+    overflow: hidden
+    text-overflow: clip
+    &--info
+        justify-content: center
+    img
+        width: 100%
+        height: auto
+    h1, h2, h3, p
+        padding: 0
+        margin: 0
+    h1
+        font-size: $ms-1
+
+@media (min-width: $medium)
+    .card
+        &--info 
+            justify-content: center
+            > a:first-of-type
+                width: 100%
+        .wide
+            display: flex    
+</style>

vue-theme/src/components/featured-image.vue

@@ -13,11 +13,11 @@ import { ytThumbnail } from '@/utils/helpers'
 
 export default {
     props: {
-        post: { required:true }
+        post: { required: true }
     },
     computed: {
         featured() {
-            return this.post.featuredImage ? this.post.featuredImage : null
+            return this.post.featured ? this.post.featured : null
         },
         hero() {
             return this.post.hero && JSON.parse(this.post.hero) ? JSON.parse(this.post.hero) : null
@@ -27,6 +27,9 @@ export default {
         getThumbnailFromYt(url) {
             return ytThumbnail(url, 'medium')
         }
+    },
+    created() {
+        console.log(this.post)
     }
 }
 </script>

vue-theme/src/pages/list.vue

@@ -15,13 +15,7 @@
 
         .posts(v-if="posts && loaded" :class="{ 'is-grid': grid }")
             section(v-for="post in posts" :key="post.slug").shadow.post
-                header
-                    router-link(:to="`/${type}/${post.slug}`")
-                        featured-image(:post="post")
-                        h2.t-up {{ post.title }}
-                article
-                    h4 {{ post.date }}
-                    p {{ post.excerpt }}
+                card(:content="post" :type="type")
 
         footer
             p {{ `${type} count: ${Object.values(posts).length}` }}
@@ -43,13 +37,14 @@
 
 <script>
 import featuredImage from '@/components/featured-image'
+import card from '@/components/card'
 import sidebar from '@/components/sidebars/sidebar'
 import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'
 
 export default {
-    components: { sidebar, featuredImage },
+    components: { sidebar, featuredImage, card },
     props: {
         sidebar: { type: Boolean },
         grid: { type: Boolean },