PronounsPage/components/Endorsements.vue

<template>
    <section v-if="config.links.endorsements && Object.keys(config.links.endorsements).length">
        <h2 class="mb-3">
            <Icon v="badge-check" />
            <T>links.endorsements</T>
        </h2>
        <div class="row">
            <template v-for="(book, key) in config.links.endorsements" :key="key">
                <div v-if="!book.published || book.published <= $date((+new Date()) / 1000)" class="col-12 col-lg-6 mb-4">
                    <a v-if="book.link" :href="book.link" target="_blank" rel="noopener">
                        <img :src="`/img/${config.locale}/mecenat/${key}.png`" class="mw-100 shadow me-3 mb-2 float-start w-50">
                    </a>
                    <img v-else :src="`/img/${config.locale}/mecenat/${key}.png`" class="mw-100 shadow me-3 mb-2 float-start w-50">
                    <h3 class="h4">
                        <a v-if="book.link" :href="book.link" target="_blank" rel="noopener">{{ book.title }}</a>
                        <span v-else>{{ book.title }}</span>
                    </h3>
                    <p v-if="book.author" class="mb-1">
                        <Icon v="user" />
                        {{ book.author }}
                    </p>
                    <p v-if="book.publisher" class="small">
                        <Icon v="building" />
                        {{ book.publisher }}
                    </p>
                    <p v-for="p in book.description" class="small">
                        <LinkedText :text="p" />
                    </p>
                    <p v-if="book.review">
                        <nuxt-link
                            :to="`/${config.links.blogRoute}/${book.review}`"
                            class="btn btn-outline-primary btn-sm d-block-force"
                        >
                            <Icon v="file-check" />
                            <T>links.review</T>
                        </nuxt-link>
                    </p>
                    <p v-else-if="book.link">
                        <a :href="book.link" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm d-block-force">
                            <Icon v="link" />
                            <T>calendar.link</T>
                        </a>
                    </p>
                </div>
            </template>
        </div>
    </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import useConfig from '../composables/useConfig.ts';

export default defineComponent({
    setup() {
        return {
            config: useConfig(),
        };
    },
});
</script>