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

// Homepage grid
<template lang="pug">
.page--index.f-row.between
    article.f-grow
        //- if sticky
        .f-row
            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
        .f-row
            h3(v-if="!allPagesLoaded") loading...
            .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")

        //- top section
        .f-row.around
            .f-col
                section(v-if="allEpisodesLoaded").shadow
                    router-link(:to="`/episodes`")
                        h3.t-up episodes
                    router-link(:to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
                        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].slug }}
                    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;]

            .f.col
                .f-row
                    section(v-if="allExhibitionsLoaded").shadow
                        router-link(:to="`/exhibitions`")
                            h3.t-up exhibitions
                        router-link(:to="`/exhibitions/${Object.values(allExhibitions)[0].slug}`")
                            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].slug }}

                    section(v-if="allEventsLoaded").shadow
                        router-link(:to="`/events`")
                            h3.t-up events
                        router-link(:to="`/events/${Object.values(allEvents)[0].slug}`")
                            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].slug }}
                .f-row
                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/posts`")
                            h3.t-up shorts PLACEHOLDER
                        router-link(:to="`/posts/${Object.values(allPosts)[0].slug}`")
                            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].slug }}

                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/posts`")
                            h3.t-up posts
                        router-link(:to="`/events/${Object.values(allPosts)[0].slug}`")
                            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].slug }}

        //- middle row
        .f-row.around
            section(v-if="allArtistsLoaded").shadow
                router-link(:to="`/artists`")
                    h3.t-up artists
                router-link(:to="`/artists/${Object.values(allArtists)[0].slug}`")
                    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].slug }}

        //- bottom row
        .f-row.around
            .f.col
                .f-row
                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/objects`")
                            h3.t-up objects PLACEHOLDER
                        router-link(:to="`/objects/${Object.values(allPosts)[0].slug}`")
                            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].slug }}

                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/techniques`")
                            h3.t-up techniques PLACEHOLDER
                        router-link(:to="`/techniques/${Object.values(allPosts)[0].slug}`")
                            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].slug }}
                .f-row
                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/talks`")
                            h3.t-up talks PLACEHOLDER
                        router-link(:to="`/talks/${Object.values(allPosts)[0].slug}`")
                            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].slug }}

                    section(v-if="allPostsLoaded").shadow
                        router-link(:to="`/center`")
                            h3.t-up center PLACEHOLDER
                        router-link(:to="`/center/${Object.values(allPosts)[0].slug}`")
                            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].slug }}
            .f-col
                section(v-if="allPostsLoaded").shadow
                    router-link(:to="`/guides`")
                        h3.t-up guides
                    router-link(:to="`/guides/${Object.values(allPosts)[0].slug}`")
                            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].slug }}

        .f-row
            section(v-if="allPagesLoaded").shadow
                h3.t-up pages
                    h2.t-up.t-cntr {{ Object.values(allPages)[0].slug }}

        //- footer row     
        .f-row
            footer.f-col
                p end of article icon
                img(src="../star.svg")
</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
        .f-row
            &:nth-of-type(3)
                margin: $ms-0 0
        section
            flex-grow: 1
            &:nth-of-type(2)
                flex-grow: 3
            &:nth-of-type(3), &:nth-of-type(4)
                flex-grow: 1
                margin: 0 0 0 $ms-0
            &:nth-of-type(5), &:nth-of-type(6)
                flex-grow: 4
            img.index
                display: block
                width: 20em 
                margin-left: auto
                margin-right: auto
    footer
        img
            width: 30px
            height: 30px
            
</style>