PronounsPage/routes/blogEntry.vue

<template>
    <Page>
        <NotFound v-if="!content" />
        <div v-else class="blog-post">
            <p v-if="!$config.links.split">
                <router-link v-if="$config.links.blog" :to="`/${$config.links.blogRoute}`">
                    <Icon v="pen-nib" />
                    <T>links.blog</T>
                </router-link>
            </p>

            <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

            <Spelling :text="content" />

            <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />

            <div class="d-print-none">
                <Separator icon="heart" />
                <Support />
                <section>
                    <Share :title="title" />
                </section>
            </div>
        </div>
    </Page>
</template>

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

export default Vue.extend({
    async asyncData({ route, app }) {
        let content;
        try {
            content = (await import(`../data/blog/${route.params.slug || route.meta?.[0].slug}.md`)).default;
        } catch (error) {
            return { title: null, img: null, intro: null, content: null };
        }
        return parseMarkdown(content, app.$translator);
    },
    data() {
        return {
            selGroup: 'general',
        };
    },
    head() {
        return head({
            title: this.title,
            description: this.intro,
            banner: this.img,
        }, this.$translator);
    },
    async mounted() {
        if (!this.content) {
            return;
        }
        if (this.content.includes('twitter-tweet')) {
            await this.$loadScript('twitter', 'https://platform.twitter.com/widgets.js');
        }

        if (this.content.includes('fb-post')) {
            var divElement = document.createElement('div');
            divElement.id = 'fb-root';
            document.body.appendChild(divElement);

            await this.$loadScript('facebook', 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0', 'xwbrn1J4');
        }

        for (const wall of this.$el.querySelectorAll('.columnist-wall')) {
            const columnist = new Columnist(wall);
            columnist.start();
        }
    },
});
</script>

<style lang="scss">
    @import "assets/variables";

    .blog-post {
        hyphens: auto;
        text-align: justify;

        h1 {
            text-align: left;
        }

        img {
            max-width: 100%;
        }

        figure {
            width: 100%;
            max-width: 24rem;
            padding: $spacer;
            img {
                width: 100%;
            }
            figcaption {
                margin-top: $spacer / 2;
                font-size: $small-font-size;
            }
        }

        .forms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(18rem, 3fr));
            grid-gap: $spacer;
            justify-items: center;
            figure {
                padding: 0;
                figcaption {
                    font-size: 90%;
                }
            }
        }

        hr {
            border: none;
            border-top: 3px solid $primary;
            opacity: 1;
        }
    }

   .columnist-wall > .columnist-column {
       transition: margin-top .2s ease-in-out;
   }
</style>