<template>
  <main>
    <transition :name="'fade'" mode="out-in">
      <div :key="transitionKey">
        <LanguageSwitch />
        <Introduction />
        <Works />
        <ExternalLinks />
      </div>
    </transition>
  </main>
</template>

<script setup>
    let globalData = await useFetchGlobalData();
    globalData = globalData.globalData._object.$sglobalData;
    
    useFetchTranslation('global');
    
    let { locale } = useI18n()
    const transitionKey = ref(0);
    
    watch(() => locale.value, (newVal, oldVal) => {
      transitionKey.value += 1;
    });
  
  /* 
    useSeoMeta({
      ogImage: '', // img from public folder
      ogImageAlt: , // globalData.something
      twitterImage: '', // img from public folder
    });

    useHead({
      htmlAttrs: {
        lang: 'fr'
      },
      link: [
        {
          rel: 'icon',
          type: 'image/png',
          href: '' // img from public folder
        }
      ]
    }); */
</script>

<style lang="scss">
@import 'assets/scss/_variables.scss';
@import 'assets/scss/_fonts.scss';
@import 'assets/scss/_styles.scss';
</style>
