151 lines
3.1 KiB
Vue
151 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const config = useAppConfig()
|
|
const fqdn = config.url.split('//')[1]
|
|
|
|
const socials = [
|
|
{
|
|
name: 'YouTube',
|
|
url: `${config.shortener}/youtube`,
|
|
icon: {
|
|
name: 'logos:youtube-icon',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Andrew',
|
|
url: `${config.shortener}/andrew`,
|
|
icon: {
|
|
name: 'logos:youtube-icon',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Twitch',
|
|
url: `${config.shortener}/twitch`,
|
|
icon: {
|
|
name: 'fa:twitch',
|
|
color: '#B68CFF',
|
|
},
|
|
},
|
|
{
|
|
name: 'TikTok',
|
|
url: `${config.shortener}/tiktok`,
|
|
icon: {
|
|
name: 'logos:tiktok-icon',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Twitter',
|
|
url: `${config.shortener}/twitter`,
|
|
icon: {
|
|
name: 'logos:twitter',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Telegram',
|
|
url: `${config.shortener}/telegram`,
|
|
icon: {
|
|
name: 'logos:telegram',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Discord',
|
|
url: `${config.shortener}/discord`,
|
|
icon: {
|
|
name: 'logos:discord-icon',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'GitHub',
|
|
url: `${config.shortener}/github`,
|
|
icon: {
|
|
name: 'fa:github',
|
|
color: 'white',
|
|
},
|
|
},
|
|
{
|
|
name: 'Steam',
|
|
url: `${config.shortener}/steam`,
|
|
icon: {
|
|
name: 'fa:steam',
|
|
color: 'white',
|
|
},
|
|
},
|
|
]
|
|
|
|
const meta = {
|
|
title: 'Enderman Online',
|
|
description:
|
|
'Discover me on your favorite social media and find ways to contact me here.',
|
|
image: `${config.url}/images/logo.png`,
|
|
url: `${config.url}/projects`,
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: meta.title,
|
|
description: meta.description,
|
|
ogTitle: meta.title,
|
|
ogDescription: meta.description,
|
|
ogImage: meta.image,
|
|
ogUrl: meta.url,
|
|
ogType: 'website',
|
|
twitterTitle: meta.title,
|
|
twitterDescription: meta.description,
|
|
twitterImage: meta.image,
|
|
twitterCard: 'summary',
|
|
})
|
|
|
|
useHead({
|
|
title: 'Socials',
|
|
htmlAttrs: {
|
|
lang: config.locale || 'en',
|
|
},
|
|
link: [
|
|
{
|
|
rel: 'icon',
|
|
type: 'image/x-icon',
|
|
href: '/favicon.ico',
|
|
},
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page">
|
|
<h3>Online presence</h3>
|
|
<Construction />
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<div class="md:basis-0 md:flex-grow-[1]">
|
|
<h5>Social media</h5>
|
|
<ul class="list-style-type-none p-0">
|
|
<li v-for="(page, index) in socials" :key="index">
|
|
<NuxtLink target="_blank" rel="noopener" :href="page.url">
|
|
<iconify-icon
|
|
:icon="page.icon.name"
|
|
:style="{ color: page.icon.color }"
|
|
width="1em"
|
|
height="1em"
|
|
inline
|
|
/>
|
|
<span class="mx-2">{{ page.name }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="md:basis-0 md:flex-grow-[3]">
|
|
<h5>Contact me</h5>
|
|
<p>
|
|
Personal:
|
|
<EMail :address="`contact@${fqdn}`" subject="Hey Enderman!" /><br />
|
|
Manager: <EMail :address="`manager@${fqdn}`" /><br />
|
|
Abuse: <EMail :address="`abuse@${fqdn}`" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|