PronounsPage/components/CalendarExtra.vue

<template>
    <section>
        <div class="alert alert-info d-flex flex-column flex-md-row justify-content-around">
            <div v-if="day" class="px-1">
                <p class="h5">
                    <T>calendar.full</T><T>quotation.colon</T>
                </p>
                <nuxt-link :to="`/${config.calendar.route}/${day.year}`" class="btn btn-outline-primary m-1">
                    <Icon v="calendar-star"/>
                    {{ day.year }}
                </nuxt-link>
            </div>
            <div class="px-1">
                <p class="h5">
                    Bots:
                </p>
                <p class="mb-0">
                    <a v-for="bot in bots" :href="bot.url" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
                        <Icon :v="bot.icon" :set="bot.iconSet || 'b'"/>
                        {{bot.headline}}
                    </a>
                </p>
            </div>
            <div v-if="!day" class="px-1">
                <p class="h5">
                    iCalendar:
                </p>
                <CalendarIcs :url="icsLink"/>
            </div>
            <div class="px-1">
                <p class="h5">
                    <T>calendar.image.header</T><T>quotation.colon</T>
                </p>
                <p class="mb-0" v-if="day">
                    <a :href="`/calendar/${day}.png`" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
                        <Icon v="image"/>
                        <T>calendar.image.header</T>
                    </a>
                </p>
                <p class="mb-0" v-else>
                    <a :href="`/calendar/${year.year}-overview.png`" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
                        <Icon v="table"/>
                        <T>calendar.view.grid</T>
                    </a>
                    <a :href="`/calendar/${year.year}-labels.png`" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
                        <Icon v="list"/>
                        <T>calendar.view.list</T>
                    </a>
                </p>
            </div>
        </div>
        <section v-if="(config.calendar.sources || []).length">
            <h3>
                <Icon v="link"/>
                <T>profile.links</T>
            </h3>
            <ul>
                <li v-for="source in config.calendar.sources">
                    <a :href="source" target="_blank" rel="noopener">
                        {{clearUrl(source)}}
                    </a>
                </li>
            </ul>
        </section>
    </section>
</template>

<script>
    import {socialLinks} from '../src/contact';
    import {clearUrl} from "../src/helpers";

    export default {
        props: {
            day: {},
            year: {},
        },
        data() {
            return {
                bots: [
                    socialLinks.calendar.mastodon,
                    socialLinks.calendar.twitter,
                ],
                clearUrl,
            }
        },
        computed: {
            icsLink() {
                return `${process.env.BASE_URL}/api/queer-calendar-${this.config.locale}${this.year.year === (new Date).getFullYear() ? '' : '-' + this.year.year}.ics`;
            },
        },
    }
</script>