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

// Homepage grid
<template lang="pug">
.page--index.f-row.between
    article.w-max
        section
            ul
                li.wide
                    p 1 - 1
                li
                    p 1 - 2
                li
                    p 1 - 3
                li
                    p 1 - 4
                li
                    p 1 - 5

        section
            ul.max
                li
                    p 2 - 1

        section
            ul.flipped
                li
                    p 3 - 1
                li
                    p 3 - 2
                li
                    p 3 - 3
                li
                    p 3 - 4
                li.wide
                    p 3 - 5
        
        //- if sticky
        //- li.f-row.wrap.w-max
        //-     h3(v-if="!allStickyLoaded") loading...
        //-     section(v-else-if="allStickyLoaded").shadow
        //-         h4.t-cap sticky
        //-         ul
        //-             li(v-for="sticky in allSticky")
        //-                 p {{ sticky.type }}: {{ sticky.title }}
        //- loading
        //- li.f-row.wrap.w-max
        //-     h3(v-if="!allPagesLoaded") loading...
        //-     .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")

        //- top section
        //- section(v-if="allEpisodesLoaded").shadow
        //-     router-link(:to="`/episodes`")
        //-         h3.t-up episodes
        //-     router-link(:to="`/episodes/${Object.values(allEpisodes)[0]}`")
        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
        //-         h2.t-up.t-cntr {{ Object.values(allEpisodes)[0] }}
        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]

        //- section(v-if="allExhibitionsLoaded").shadow
        //-     router-link(:to="`/exhibitions`")
        //-         h3.t-up exhibitions
        //-     router-link(:to="`/exhibitions/${Object.values(allExhibitions)[0]}`")
        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
        //-         h2.t-up.t-cntr {{ Object.values(allExhibitions)[0] }}
        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]

        //- section(v-if="allEventsLoaded").shadow
        //-     router-link(:to="`/events`")
        //-         h3.t-up events
        //-     router-link(:to="`/events/${Object.values(allEvents)[0]}`")
        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
        //-         h2.t-up.t-cntr {{ Object.values(allEvents)[0] }}
        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]

        //- section(v-if="allPostsLoaded").shadow
        //-     router-link(:to="`/posts`")
        //-         h3.t-up shorts PLACEHOLDER
        //-     router-link(:to="`/posts/${Object.values(allPosts)[0]}`")
        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
        //-         h2.t-up.t-cntr {{ Object.values(allPosts)[0] }}
        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]

        //- //- middle row
        //- section(v-if="allArtistsLoaded").shadow
        //-     router-link(:to="`/artists`")
        //-         h3.t-up artists
        //-     router-link(:to="`/artists/${Object.values(allArtists)[0]}`")
        //-         img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
        //-         h2.t-up.t-cntr {{ Object.values(allArtists)[0] }}
        //-     p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]
</template>

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

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

export default {
    mixins: [postTypeGetters, scrollTop],
    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)
        },
    }
}
</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
            border: 1px yellow solid
            ul
                list-style: none
@media (min-width: $medium)
    .page--index > article > section
        &:nth-of-type(2)
            margin: 1em auto
        ul
            display: grid
            grid-template-columns: 
                50% 24% 24%
            grid-template-rows: 
                47% 47%
            gap: 4% 1%
            justify-items: strech
            align-items: stretch
            height: auto
            li
                min-height: 20em
                background-color: purple
                &.wide:nth-of-type(1)
                    grid-column-start: 1
                    grid-row-start: 1
                    grid-row-end: end
                &:nth-of-type(2), &:nth-of-type(3)
                    grid-row-start: 1
                    grid-column-start: 2
                &: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
            &.max
                grid-template-columns: 
                    auto
                grid-template-rows: 
                    auto
            &.flipped
                grid-template-columns: 
                    24% 24% 50%
                li
                    &:nth-of-type(3)
                        grid-column-start: 1
                        grid-row-start: 2
                    &.wide:nth-of-type(5)
                        grid-column-start: 3
                        grid-row-start: 1
                        grid-row-end: end

</style>