140 lines
3.2 KiB
Vue
140 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
|
|
const socials = [
|
|
{
|
|
name: 'YouTube',
|
|
url: 'https://go.enderman.ch/youtube',
|
|
icon: 'youtube',
|
|
},
|
|
{
|
|
name: 'Andrew',
|
|
url: 'https://go.enderman.ch/andrew',
|
|
icon: 'youtube',
|
|
},
|
|
{
|
|
name: 'Twitch',
|
|
url: 'https://go.enderman.ch/twitch',
|
|
icon: 'twitch',
|
|
},
|
|
{
|
|
name: 'TikTok',
|
|
url: 'https://go.enderman.ch/tiktok',
|
|
icon: 'tiktok',
|
|
},
|
|
{
|
|
name: 'Twitter',
|
|
url: 'https://go.enderman.ch/twitter',
|
|
icon: 'twitter',
|
|
},
|
|
{
|
|
name: 'Telegram',
|
|
url: 'https://go.enderman.ch/telegram',
|
|
icon: 'telegram',
|
|
},
|
|
{
|
|
name: 'Discord',
|
|
url: 'https://go.enderman.ch/discord',
|
|
icon: 'discord',
|
|
},
|
|
{
|
|
name: 'GitHub',
|
|
url: 'https://go.enderman.ch/github',
|
|
icon: 'github',
|
|
},
|
|
{
|
|
name: 'Steam',
|
|
url: 'https://go.enderman.ch/steam',
|
|
icon: 'steam',
|
|
},
|
|
]
|
|
|
|
const meta = {
|
|
title: 'Enderman Online',
|
|
description:
|
|
'Discover me on your favorite social media and find ways to contact me here.',
|
|
image: 'https://enderman.ch/images/logo.png',
|
|
url: 'https://enderman.ch/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: 'en',
|
|
},
|
|
link: [
|
|
{
|
|
rel: 'icon',
|
|
type: 'image/x-icon',
|
|
href: '/favicon.ico',
|
|
},
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<h3 class="alex">Online presence</h3>
|
|
<hr />
|
|
<p>
|
|
<strong>🚧 This page is currently under construction.</strong> Expect a
|
|
lot more content to be added as time passes.
|
|
<em>Please report all bugs you encounter via the link in the footer</em>,
|
|
I will make sure to sand them down.
|
|
</p>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-12 col-md-3">
|
|
<h5 class="alex">Social media</h5>
|
|
<ul class="list-style-type-none p-0">
|
|
<li v-for="(page, index) in socials" :key="index">
|
|
<div class="d-flex flex-row align-items-center gap-1">
|
|
<ClientOnly>
|
|
<FontAwesomeIcon
|
|
:icon="`fa-brands fa-${page.icon}`"
|
|
fixed-width
|
|
/>
|
|
</ClientOnly>
|
|
<a
|
|
class="link-hi"
|
|
target="_blank"
|
|
rel="noopener"
|
|
:href="page.url"
|
|
>
|
|
{{ page.name }}
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 col-md-9">
|
|
<h5 class="alex">Contact me</h5>
|
|
<p>
|
|
Personal:
|
|
<EMail
|
|
class="link-hi"
|
|
address="contact@enderman.ch"
|
|
subject="Hey Enderman!"
|
|
/><br />
|
|
Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
|
|
Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|