index/pages/social.vue

127 lines
2.8 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">Social media</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 />
<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>
<h3 class="alex">Contact me</h3>
<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>
</section>
</template>
<style scoped lang="scss"></style>