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(v-for="sticky in allSticky")
                    card(:content="sticky" :type="`${sticky.type}`")
        
        //- firstRow: ['episodes', 'exhibitions', 'events', 'shorts', 'posts'], exceprt on episodes only.
        section
            ul
                li.post(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.post(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.post(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 = ['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.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'post'])
        },
    methods: {
        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.post
                    background-color: white
                    .featured-or-hero-image img
                        max-height: $max-card-img-height
                    p.excerpt
                        -webkit-line-clamp: calc($card-line-clamp * 2)
            &.max 
                > ul
                    grid-template-columns: 
                        auto
                    grid-template-rows: 
                        auto
/* min-width 768px */
@media (min-width: $medium)
    .page--index > article > section
        ul
            display: grid
            grid-template-columns: 
                49.5% 24.25% 24.25%
            grid-template-rows: 
                48% 48%
            gap: 2% 1%
            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)
                /* 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
        &.max
            /* Need some extra gap on wide pages */
            padding: $ms--2 0
            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: 
                        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>