L-Nafaryus
c707ca5a36
All checks were successful
nix-build-publish / check (push) Successful in 6m29s
80 lines
3.1 KiB
Vue
80 lines
3.1 KiB
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>
|