elnafo-radio/crates/frontend/src/views/Base.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { headMeta, devel } from "@";
import NavBar from "@/components/NavBar.vue";
import DocumentationIcon from "@/components/DocumentationIcon.vue";
import DiscordIcon from "@/components/DiscordIcon.vue";
import MatrixIcon from "@/components/MatrixIcon.vue";
import GitIcon from "@/components/GitIcon.vue";
import VinylIcon from "@/components/VinylIcon.vue";
import Player from "@/components/Player.vue";
import Error from "@/components/Error.vue";


const title = ref(null);
const author = ref(null);
const discord = ref(null);
const matrix = ref(null);
const git = ref(null);
const documentation = ref(null);

onMounted(() => {
    title.value = document.getElementsByTagName("title")[0].text;
    author.value = devel ? "L-Nafaryus" : headMeta("author");
    discord.value = devel ? "http://example.com" : headMeta("discord");
    matrix.value = devel ? "http://example.com" : headMeta("matrix");
    git.value = devel ? "http://example.com" : headMeta("git");
    documentation.value = devel ? "http://example.com" : headMeta("documentation");
});

</script>

<template>
    <VinylIcon class="absolute h-full mx-auto w-full -z-10 opacity-15" />
    <div class="flex-grow">
        <NavBar>
            <template #left>
                <RouterLink class="link-button font-bold" to="/">{{ title }}</RouterLink>
            </template>

            <template #right>
                <a v-if="matrix" :href="matrix" target="_blank" rel="noreferrer"
                    class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
                    <MatrixIcon />
                    <span class="hidden sm:inline">Matrix</span>
                </a>
                <a v-if="discord" :href="discord" target="_blank" rel="noreferrer"
                    class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
                    <DiscordIcon />
                    <span class="hidden sm:inline">Discord</span>
                </a>
            </template>
        </NavBar>

        <main class="w-full max-w-[1000px] mx-auto">
            <slot></slot>
        </main>
    </div>

    <Player />

    <footer class="pb-2 pt-2 pl-5 pr-5 bg-ctp-mantle">
        <div class="flex justify-between max-w-[1200px] mx-auto">
            <span v-if="author" class="text-ctp-peach font-bold items-center flex">Made by {{ author }}</span>
            <div class="flex space-x-1">
                <a v-if="documentation" :href="documentation" target="_blank" rel="noreferrer"
                    class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
                    <DocumentationIcon />
                    <span class="hidden sm:inline">Docs</span>
                </a>
                <a v-if="git" :href="git" target="_blank" rel="noreferrer"
                    class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
                    <GitIcon />
                    <span class="hidden sm:inline">Git</span>
                </a>

            </div>
        </div>
    </footer>
</template>