:recycle: moved card to separate component

vue-theme/src/pages/index.vue

@@ -6,64 +6,34 @@
             ul.flipped(:class="[`sticky-${Object.keys(allSticky).length}`]")
                 //- if sticky
                 li.shadow(v-for="sticky in allSticky")
-                    .card(v-if="sticky")
-                        router-link(:to="`/${sticky.type}`")
-                            p.t-up {{sticky.type}}
-                        .card--info
-                            router-link(:to="`/${sticky.type}/${sticky.slug}`")
-                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-                            .f-col.w-max
-                                router-link(:to="`/${sticky.type}/${sticky.slug}`")
-                                    h1.t-up.t-cntr {{ sticky.title }}
-                                p episode excerpt, Lorem ipsum dolor sit amet, consectetu
+                    card(:content="sticky" :type="`${sticky.type}s`")
 
         section
             ul
                 li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'posts']")
-                    .card(v-if="firstPostOfType(type)")
-                        router-link(:to="`/${type}`")
-                            p.t-up {{type}}
-                        router-link(:to="`/${type}/${firstPostOfType(type).slug}`")
-                            img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-                            h1.t-up.t-cntr {{ firstPostOfType(type).title }}
-                        p episode excerpt, Lorem ipsum dolor sit amet, consectetu
+                    card(:content="firstPostOfType(type)" :type="type")
 
         section.max
             ul.w-max
                 li.shadow(v-for="post in [randomPostOfType('artists')]")
-                    .card(v-if="post")
-                        router-link(:to="`/${'artists'}/${post.slug}`")
-                            p.t-up {{'artists'}}
-                        .card--info.f-row
-                            router-link(:to="`/artists/${post.slug}`")
-                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-                            .f-col.w-max
-                                router-link(:to="`/artists/${post.slug}`")
-                                    h1.t-up.t-cntr {{ post.title }}
-                                p episode excerpt, Lorem ipsum dolor sit amet, consectetu
+                    card(v-if="post" :content="post" :type="`${post.type}s`" :wide="true")
 
         section
             ul.flipped
                 li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'artists']")
                     .random--wrapper(v-for="post in [randomPostOfType(type)]")
-                        .card(v-if="post")
-                            router-link(:to="`/${type}`")
-                                p.t-up {{type}}
-                            router-link(:to="`/${type}/${post.slug}`")
-                                img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
-                                h1.t-up.t-cntr {{ post.title }}
-                            p episode excerpt, Lorem ipsum dolor sit amet, consectetu
-                                
-
+                        card(:content="post" :type="type")
 </template>
 
 <script>
 import { postTypeGetters, scrollTop } from './mixin-post-types'
+import card from '@/components/card.vue'
 
 import { convertTitleCase, postTypes } from '@/utils/helpers'
 
 export default {
     mixins: [postTypeGetters, scrollTop],
+    components: { card },
     created() {
         // console.log(wp)
         postTypes.forEach(type => {
@@ -102,46 +72,29 @@ export default {
 <style lang="postcss">
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
-.page--index
-    > article
-        display: flex
-        justify-content: space-around
-        flex-direction: column
-        align-items: stretch
-        section
-            ul
-                list-style: none
-                .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
-            &.max 
-                margin: 0
-                > ul
-                    grid-template-columns: 
-                        auto
-                    grid-template-rows: 
-                        auto
-                    > li > .card > img
-                        width: 100%
+.page--index > article
+    display: flex
+    justify-content: space-around
+    flex-direction: column
+    align-items: stretch
+    section
+        ul
+            list-style: none
+            li
+                margin: 0 0 $ms-0 0
+        &.max 
+            margin: 0
+            > ul
+                grid-template-columns: 
+                    auto
+                grid-template-rows: 
+                    auto
 @media (min-width: $medium)
     .page--index > article > section
         &.stickies
             margin: 0 0 2% 0
         &.max 
             margin: 3.5% 0 3% 0
-            > li .card--info > a:first-of-type
-                width: 100%
         ul
             display: grid
             grid-template-columns: 
@@ -150,6 +103,7 @@ export default {
                 48% 48%
             gap: 4% 1%
             li
+                margin: 0
                 min-height: 10em
                 background-color: purple
                 &:nth-of-type(1)
@@ -166,20 +120,7 @@ export default {
                     grid-row-start: 2
                 &:nth-of-type(5)
                     grid-column-start: 3
-                .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
+
         &.stickies
             ul
                 &.flipped