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="{ name: 'calendar', params: { year: 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 v-if="day" class="mb-0">
                    <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 v-else class="mb-0">
                    <a
                        :href="`/calendar/${config.locale}/${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/${config.locale}/${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 useConfig from '../composables/useConfig.ts';
import { socialLinks } from '../src/contact.ts';
import { clearUrl, newDate } from '../src/helpers.ts';

import { getUrlForLocale } from '~/src/domain.js';

export default {
    props: {
        day: {},
        year: {},
    },
    setup() {
        return {
            config: useConfig(),
        };
    },
    data() {
        return {
            bots: [
                socialLinks.calendar.mastodon,
                socialLinks.calendar.bluesky,
            ],
            clearUrl,
        };
    },
    computed: {
        icsLink() {
            const yearSuffix = this.year.year === newDate().getFullYear() ? '' : `-${this.year.year}`;
            return `${getUrlForLocale(this.config.locale)}/api/queer-calendar-${this.config.locale}${yearSuffix}.ics`;
        },
    },
};
</script>