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(:class="[`sticky-${Object.keys(allSticky).length}`, 'flipped']")
                //- if sticky
                li.post.shadow(v-for="sticky in allSticky")
                    card(:content="sticky" :type="`${sticky.type}`")
        
        //- firstRow: ['episode', 'exhibition', 'event', 'short', 'post'], exceprt on episode only.
        section
            ul
                li.post.shadow(v-for="type in firstRow")
                    card(:content="firstPostOfType(type)" :type="type")
        
        //- secondRow: 'artist', // This is only ONE post, excerpt on artist
        section.max
            ul.w-max
                li.post.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: ['object', 'technique', 'publication', 'center', 'guide'], exceprt on guide only
        section
            ul.flipped
                li.post.shadow(v-for="type in thirdRow")
                    .random--wrapper(v-for="post in [...randomPosts, ...allPages.filter(p => p.slug == 'center')].filter(p => p.type == type)")
                        card(:content="post" :type="type")
</template>

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

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

export default {
    mixins: [postTypeGetters, scrollTop, heroUtils],
    components: { card },
    data() {
        return {
            firstRow: ['episode', 'exhibition', 'event', 'short', 'post'],
            secondRow: 'artist', // This is only ONE post
            thirdRow: ['object', 'technique', 'publication', 'page', 'guide'],
            // ideal iteration
            // thirdRow: ['object', 'talks', 'publication', 'center', 'guide'],
        }
    },
    async created() {
        // console.log(wp)
        const omit = ['page']
        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 (['event', 'exhibition'].includes(type)) {
                // 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 })
                }
            }
            else if (!omit.includes(type)){
                this.$store.dispatch(action, { sortType: null, params })
            }
        }
        if (!this['allPagesLoaded']) {
            await this.$store.dispatch('getAllPages', { sortType: null, params: null })
        }
        await this.checkAndSetHero('welcome')
        await this.$store.dispatch('getRandomPosts', ['artist', 'guide', 'object', 'technique', 'publication', 'post'])
    },
    methods: {
        firstPostOfType(type) {
            return Object.values(this[`all${convertTitleCase(type)}s`])[0]
        },
        async checkAndSetHero(type) {
            this._clearHero(this.$store)

            // We always set a hero no matter what
            // Because the hero component will deal
            // with how to render based on hero.url
            if(!this.allPages) return console.warn('no pages in state', this)
            const page = this.allPages.filter(
                page => page.slug == type,
            )[0]
            if(!page) return console.warn(`no page for ${type} found`)

            this.$store.commit('SET_HERO', this._setHeroInfo(page))
        },
    },
}
</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.post
                    background-color: white
                    margin: 0 0 0.65em 0
                    .featured-or-hero-image img
                        max-height: $max-card-img-height
                    p.excerpt
                        -webkit-line-clamp: $card-line-clamp
            &.max 
                > ul
                    grid-template-columns: 
                        auto
                    grid-template-rows: 
                        auto
/* min-width 768px */
@media (min-width: $medium)
    .page--index 
        > article 
            grid-gap: $ms--2 0
            > section
                ul
                    display: grid
                    grid-template-columns: 
                        49.5% 24.25% 24.25%
                    grid-template-rows: repeat(2, 1fr)
                    gap: 0 $ms--2
                    li
                        margin: 0
                        min-height: 10em
                        &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
                            /* p.excerpt
                                -webkit-line-clamp: $card-line-clamp */
                            .featured-or-hero-image img
                                /* max-height: calc($max-card-img-height / 2) */
                                max-height: $max-card-img-height
                        /* 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
                    &.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
                &.max
                    li .featured-or-hero-image img
                        max-height: $max-card-img-height
                &.stickies
                    .post 
                        min-width: 24.25%
                    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
                        &[class^="sticky-"]
                            display: flex
                        &.sticky-1
                            > li .card--info 
                                display: flex
                                > a:first-of-type
                                    width: 100%
                        &.sticky-5
                            grid-template-columns: 
                                24.25% 24.25% 49.5%
                            grid-template-rows: 
                                repeat(2, 1fr)
                            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>