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

// Homepage grid
<template lang="pug">
.page--index.f-col.between
    header.w-max(v-if="allPages.welcome")
        .page-content(v-html="allPages.welcome.content")

    article.w-max
        //- sticky section
        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}`")
        
        //- firstRow: ['episodes', 'exhibitions', 'events', 'shorts', 'posts'], exceprt on episodes only.
        section
            ul
                li.shadow(v-for="type in firstRow")
                    card(:content="firstPostOfType(type)" :type="type")
        
        //- secondRow: 'artists', // This is only ONE post, excerpt on artist
        section.max
            ul.w-max
                li.shadow(v-for="post in randomPosts.filter(p => p.type == secondRow)")
                    card(v-if="post" :content="post" :type="`${post.type}`" :wide="true")
        
        //- (thirdRow) firstRow.flipped: ['guides', 'objects', 'techniques', 'talks', 'center'], exceprt on guides only
        section
            ul.flipped
                li.shadow(v-for="type in thirdRow")
                     .random--wrapper(v-for="post in randomPosts.filter(p => p.type == type)")
                        card(:content="post" :type="type")
</template>

<script>
import { postTypeGetters, scrollTop } from './mixin-post-types'
import card from '@/components/card.vue'

import { convertTitleCase, postTypes, sortTypes } from '@/utils/helpers'

export default {
    mixins: [postTypeGetters, scrollTop],
    components: { card },
    data() {
        return {
            firstRow: ['episode', 'exhibition', 'event', 'artist', 'post'],
            secondRow: 'artist', // This is only ONE post
            thirdRow: ['episode', 'exhibition', 'event', 'artist', 'post'],
        }
    },
    async created() {
        // console.log(wp)
        const omit = ['event', 'exhibition']
        for (let type of postTypes) {
            const action = `getAll${convertTitleCase(type)}s`

            // Limit the amount of posts because we
            // only need the most recent
            const params = { limit: 1 }
            
            // We try and fetch EVERYTHING except
            // for EVENTS and EXHIBITIONS
            if (!omit.includes(type)) {
                this.$store.dispatch(action, { sortType: null, params })
            } else {
                // Only grab the current or upcoming on load
                const eventsOrExhibitions = await this.$store.dispatch(
                    action,
                    { 
                        sortType: sortTypes.currentAndUpcoming,
                        params
                    }
                )
                // If no current or upcoming, get past events
                // to fill in the blanks
                if (eventsOrExhibitions.length < 1) {
                    this.$store.dispatch(action, { sortType: sortTypes.past, params })
                }
            }
        }
        await this.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'artist', 'post'])
        this.checkAndSetHero('welcome')
    },
    methods: {
        async checkAndSetHero(type) {
            if (!this['allPagesLoaded']) {
                await this.$store.dispatch('getAllPages', { sortType: null, params: null })
            }
            // We always set a hero no matter what
            // Because the hero component will deal
            // with how to render based on hero.url
            const page = this.allPages.filter(
                page => page.slug == type + 's',
            )[0]
            let hero = { url: null, heroType: null }
            
            // Clear the hero and bail
            if(!page) return this.$store.commit('SET_HERO', hero)

            hero.url = page.featured
            hero.heroType = 'image'
            if (
                page.hero &&
                JSON.parse(page.hero) &&
                JSON.parse(page.hero).url
            ) {
                json = JSON.parse(page.hero)
                json.heroType = 'video'
            }
            // No featured or youTube
            if (!hero.url) {
                hero.heroType = null
            }
            // Set the hero text to the post title or excerpt
            hero.text = page && page.excerpt ? page.excerpt : page.title
            this.$store.commit('SET_HERO', hero)
        },
        firstPostOfType(type) {
            return Object.values(this[`all${convertTitleCase(type)}s`])[0]
        },
    },
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../sss/variables.sss'
@import '../sss/theme.sss'
.page--index 
    > header
        padding: $ms-0
    > 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
/* min-width 768px */
@media (min-width: $medium)
    .page--index > article > section
        &.stickies
            margin: 0 0 2% 0
        &.max 
            margin: 35px 0 20px
        ul
            display: grid
            grid-template-columns: 
                49.5% 24.25% 24.25%
            grid-template-rows: 
                48% 48%
            gap: 3% 1%
            li
                margin: 0
                min-height: 10em
                /* background-color: purple */
                background-color: white
                /* n1 episode */
                &:nth-of-type(1)
                    grid-column-start: 1
                    grid-row-start: 1
                    grid-row-end: 3
                /* n2 exhibition, n3 events */
                &:nth-of-type(2), &:nth-of-type(3)
                    grid-column-start: 2
                    grid-row-start: 1
                &:nth-of-type(3)
                    grid-column-start: 3
                /* n4 artists, n5 posts */
                &: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: 3% 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>