vue-wp/vue-theme/src/pages/index.vue

// Homepage grid
<template lang="pug">
.page--index.f-row.between
    article.w-max
        section(v-if="allSticky && Object.keys(allSticky).length").stickies
            ul.flipped(:class="[`sticky-${Object.keys(allSticky).length}`]")
                //- if sticky
                li.shadow(v-for="sticky in allSticky")
                    card(:content="sticky" :type="`${sticky.type}s`")

        section
            ul
                li.shadow(v-for="type in ['episodes', 'exhibitions', 'events', 'artists', 'posts']")
                    card(:content="firstPostOfType(type)" :type="type")

        section.max
            ul.w-max
                li.shadow(v-for="post in [randomPostOfType('artists')]")
                    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(: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 => {
            const capitalizedType = convertTitleCase(type)
            this.$store.dispatch(`getAll${capitalizedType}`)
        })
        this.checkAndSetHero('welcome')
    },
    methods: {
        async checkAndSetHero(type) {
            if(!this['allPagesLoaded']) {
                await this.$store.dispatch('getAllPages')    
            }
            const page = this.allPages[type]
            if(!page) return
            let json = { url: page.featured, heroType: 'image' }
            if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
                json = JSON.parse(page.hero)
                json.heroType = 'video'
            }
            this.$store.commit('SET_HERO', json)
        },
        firstPostOfType(type) {
            return Object.values(this[`all${convertTitleCase(type)}`])[0]
        },
        randomPostOfType(type) {
            const postsOfType = Object.values(this[`all${convertTitleCase(type)}`])
            const max = postsOfType.length
            const rand = Math.floor(Math.random() * max)
            return postsOfType[rand]
        }
    }
}
</script>

<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
            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
        ul
            display: grid
            grid-template-columns: 
                49.5% 24.25% 24.25%
            grid-template-rows: 
                48% 48%
            gap: 4% 1%
            li
                margin: 0
                min-height: 10em
                background-color: purple
                &:nth-of-type(1)
                    grid-column-start: 1
                    grid-row-start: 1
                    grid-row-end: 3
                &:nth-of-type(2), &:nth-of-type(3)
                    grid-column-start: 2
                    grid-row-start: 1
                &:nth-of-type(3)
                    grid-column-start: 3
                &:nth-of-type(4), &:nth-of-type(5)
                    grid-column-start: 2
                    grid-row-start: 2
                &:nth-of-type(5)
                    grid-column-start: 3

        &.stickies
            ul
                &.flipped
                    grid-template-columns: 
                        24.25% 24.25% 49.5% 
                    li
                        &:nth-of-type(1)
                            grid-row-end: 2
                        &:nth-of-type(3)
                            grid-column-start: 1
                            grid-row-start: 2
                        &:nth-of-type(5)
                            grid-row-start: 1
                            grid-row-end: 3
                &.sticky-1
                    display: flex
                    > li .card--info 
                        display: flex
                        > a:first-of-type
                            width: 100%
                &.sticky-2
                    display: flex
                &.sticky-3
                    display: flex
                &.sticky-4
                    display: flex
                &.sticky-5
                    grid-template-columns: 
                        24.25% 24.25% 49.5%
                    grid-template-rows: 
                        48% 48%
                    gap: 4% 1%
                    > li
                        &:nth-of-type(1)
                            grid-row-end: 2
                        &:nth-of-type(2)
                            grid-column-start: 2
                            grid-row-start: 1
                            grid-row-end: 2
                        &:nth-of-type(3)
                            grid-column-start: 1
                            grid-row-start: 2
                            margin: 0 0 8% 0
                        &:nth-of-type(4)
                            grid-column-start: 2
                            grid-row-start: 2
                            margin: 0 0 8% 0
                        &:nth-of-type(5)
                            grid-column-start: 3
                            margin: 0 0 4% 0
</style>