<template>
    <div>
        <h1>{{ $prismic.richTextAsPlain(aboutContent.main_title) }}</h1>
    </div>
</template>

<script>
    export default {
        head () {
            return {
            title: 'Prismic Nuxt.js Blog',
            }
        },
        async asyncData({context, error, req}) {
            try{
            // Query to get API object
            const api = await Prismic.getApi(PrismicConfig.apiEndpoint, {req})

            // Query to get blog home content
            const document = await api.getSingle('about')
            let aboutContent = document.data

            // // Query to get posts content to preview
            // const blogPosts = await api.query(
            //     Prismic.Predicates.at("document.type", "post"),
            //     { orderings : '[my.post.date desc]' }
            // )


            // Returns data to be used in template
            return {
                aboutContent,
                // posts: blogPosts.results,
                // image: aboutContent.image.url,
            }
            } catch (e) {
            // Returns error page
            error({ statusCode: 404, message: 'Page not found' })
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>