Add some SEO metas (WIP)

src/routes/_layout.svelte

@@ -18,6 +18,10 @@
                         explore_globe
                         explore_list
                         instagram
+                        seo_name
+                        seo_title_default
+                        seo_description_default
+                        seo_share_image { full_url }
                         credits_text
                         credits_list
                     }

src/routes/choose.svelte

@@ -13,6 +13,7 @@
     import Globe from '../molecules/InteractiveGlobe'
     import Locations from '../organisms/Locations'
     import Footer from '../organisms/Footer'
+    import SocialMetas from '../utils/SocialMetas'
 
     // Reset current location if existing
     $: {
@@ -33,7 +34,14 @@
 </script>
 
 <svelte:head>
-	<title>Houses Of - Beautiful houses of planet Earth</title>
+	<title>Houses Of - {$site.seo_title_default} of planet Earth</title>
+    <meta name="description" content={$site.description}>
+    <SocialMetas
+        url="https://housesof.world"
+        title="Houses Of - {$site.seo_title_default} planet Earth"
+        description={$site.seo_description_default}
+        image={$site.seo_share_image.full_url}
+    />
 </svelte:head>
 
 <section class="page explore">

src/routes/credits.svelte

@@ -11,6 +11,7 @@
     import LinkTranslate from '../atoms/LinkTranslate'
     import InteractiveGlobe from '../molecules/InteractiveGlobe'
     import Footer from '../organisms/Footer'
+    import SocialMetas from '../utils/SocialMetas'
 
     // Categories
     $: credits = $site.credits_list
@@ -29,6 +30,13 @@
 
 <svelte:head>
 	<title>Houses Of - Credits</title>
+    <meta name="description" content={$site.credits_text}>
+    <SocialMetas
+        url="https://housesof.world/credits"
+        title="Houses Of - Credits"
+        description={$site.credits_text}
+        image={$site.seo_share_image.full_url}
+    />
 </svelte:head>
 
 <section class="page">

src/routes/index.svelte

@@ -18,8 +18,6 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
-    import { flip } from 'svelte/animate'
     import { site, currentLocation, currentPhotos } from '../store'
     import * as fn from '../functions'
 
@@ -35,6 +33,7 @@
     import Carousel from '../organisms/Carousel'
     import Locations from '../organisms/Locations'
     import Footer from '../organisms/Footer'
+    import SocialMetas from '../utils/SocialMetas'
 
     // Reset current location if existing
     $: {
@@ -51,8 +50,8 @@
     ** Run code on browser only
     */
     onMount(() => {
-        // Scroll apparitions
         if (process.browser) {
+            // Scroll apparitions
             AOS.init()
 
             // Parallax titles
@@ -88,7 +87,14 @@
 </script>
 
 <svelte:head>
-	<title>Houses Of - Beautiful houses of planet Earth</title>
+	<title>Houses Of - {$site.seo_title_default} planet Earth</title>
+    <meta name="description" content={$site.seo_description_default}>
+    <SocialMetas
+        url="https://housesof.world"
+        title="Houses Of - {$site.seo_title_default} planet Earth"
+        description={$site.seo_description_default}
+        image={$site.seo_share_image.full_url}
+    />
 </svelte:head>
 
 <section class="intro">

src/utils/SocialMetas.svelte

@@ -0,0 +1,24 @@
+<script>
+    export let ogType = 'website'
+    export let twCard = 'summary_large_image'
+    export let url = ''
+    export let title = ''
+    export let description = ''
+    export let image
+</script>
+
+<meta property="og:type" content={ogType}>
+<meta property="og:url" content={url}>
+<meta property="og:title" content={title}>
+<meta property="og:description" content={description}>
+{#if image}
+<meta property="og:image" content={image}>
+{/if}
+
+<meta property="twitter:card" content={twCard}>
+<meta property="twitter:url" content={url}>
+<meta property="twitter:title" content={title}>
+<meta property="twitter:description" content={description}>
+{#if image}
+<meta property="twitter:image" content={image}>
+{/if}