<template>
    <Page>
        <h2 class="d-flex justify-content-between">
            <span>
                <Icon v="pen-nib" />
                <T>links.blog</T>
            </span>
            <span>
                <a href="/blog.atom" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
                    <Icon v="rss" />
                    Feed
                </a>
            </span>
        </h2>
        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
        <BlogEntriesList :posts="posts" details />
        <Separator icon="heart" />
        <Support />
        <section>
            <Share :title="$t('links.blog')" />
        </section>
    </Page>
</template>

<script lang="ts">
import Vue from 'vue';
import { head } from '../src/helpers.ts';

export default Vue.extend({
    async asyncData({ app }) {
        return {
            posts: await app.$axios.$get('/blog'),
        };
    },
    head() {
        return head({
            title: this.$t('links.blog'),
        }, this.$translator);
    },
});
</script>
