<script setup lang="ts">
const TITLE = "pihkaal.me";
const DESCRIPTION =
  "23yo developer from Brittany. I love programming and taking photos.";
const URL = "https://pihkaal.me";
const IMAGE = `${URL}/thumbnail.png`;

const { locale, locales } = useI18n();

const ogLocale = computed(
  () => locales.value.find((l) => l.code === locale.value)?.language ?? "en-US",
);
const ogLocaleAlternate = computed(() =>
  locales.value.filter((l) => l.code !== locale.value).map((l) => l.language!),
);

useSeoMeta({
  title: TITLE,
  description: DESCRIPTION,
  author: "pihkaal",
  robots: "index, follow",

  ogType: "website",
  ogTitle: TITLE,
  ogDescription: DESCRIPTION,
  ogImage: IMAGE,
  ogImageType: "image/png",
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogUrl: URL,
  ogSiteName: TITLE,
  ogLocale,
  ogLocaleAlternate,

  themeColor: "#181818",

  twitterCard: "summary_large_image",
  twitterTitle: TITLE,
  twitterDescription: DESCRIPTION,
  twitterImage: IMAGE,
});

useHead({
  htmlAttrs: { lang: locale },
  link: [{ rel: "canonical", href: URL }],
  script: [
    {
      type: "application/ld+json",
      innerHTML: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Person",
        name: "pihkaal",
        url: URL,
        email: "hello@pihkaal.me",
        jobTitle: "Full-Stack Developer",
        description: DESCRIPTION,
        image: IMAGE,
        sameAs: [
          "https://git.pihkaal.me",
          "https://linkedin.com/in/stevancorre/",
        ],
      }),
    },
    {
      type: "application/ld+json",
      innerHTML: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "WebSite",
        name: TITLE,
        url: URL,
        description: DESCRIPTION,
        author: {
          "@type": "Person",
          name: "pihkaal",
          url: URL,
        },
      }),
    },
  ],
});
</script>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
