Use server detected host for sharing URLs

src/routes/_error.svelte

@@ -1,5 +1,4 @@
 <script>
-    import { onMount } from 'svelte'
     import { site } from '../utils/store'
 
     // Components
@@ -12,20 +11,18 @@
     // Props
     export let status
     export let error
-
-
-    /*
-    ** Run code on browser only
-    */
-    onMount(() => {
-
-    })
 </script>
 
 <svelte:head>
     <title>{$site.seo_name} - {error.message}</title>
 </svelte:head>
 
+{#if process.env.NODE_ENV === 'development' && error.stack}
+<div class="wrap">
+    <pre>{error.stack}</pre>
+</div>
+{/if}
+
 <section class="page">
     <div class="wrap">
         <div class="page__top">
@@ -38,10 +35,7 @@
         </div>
 
         <div class="page__description style-description">
-            <p>
+            <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
-                Oh no…
-                Looks like something wrong just happened. Like a nasty error {status}.
-            </p>
             <Button href="/" class="button" text="Go back to the homepage" on:click={() => window.location.href = '/'} />
         </div>
 
@@ -50,10 +44,3 @@
 
     <Footer />
 </section>
-
-
-{#if process.env.NODE_ENV === 'development' && error.stack}
-<div class="wrap">
-    <pre>{error.stack}</pre>
-</div>
-{/if}

src/routes/choose.svelte

@@ -1,5 +1,6 @@
 <script>
     import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
     import {
         site,
         currentLocation,
@@ -20,6 +21,9 @@
     import { animateIn } from '../animations/page'
     pageTransition.onAnimationEnd = animateIn
 
+    // Variables
+    const { page } = stores()
+
 
     // Reset current location if existing
     $: {
@@ -41,7 +45,7 @@
 	<title>{$site.seo_name} - {$site.seo_title_default} of planet Earth</title>
     <meta name="description" content={$site.description}>
     <SocialMetas
-        url="https://housesof.world"
+        url="https://{$page.host}/choose"
         title="{$site.seo_name} - {$site.seo_title_default} planet Earth"
         description={$site.seo_description_default}
         image={$site.seo_share_image.full_url}

src/routes/credits.svelte

@@ -1,5 +1,6 @@
 <script>
     import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
     import { site, pageReady, pageTransition } from '../utils/store'
 
     // Components
@@ -14,6 +15,9 @@
     import { animateIn } from '../animations/page'
     pageTransition.onAnimationEnd = animateIn
 
+    // Variables
+    const { page } = stores()
+
 
     /*
     ** Run code when mounted
@@ -28,7 +32,7 @@
 	<title>{$site.seo_name} - Credits</title>
     <meta name="description" content={$site.credits_text}>
     <SocialMetas
-        url="https://housesof.world/credits"
+        url="https://{$page.host}/credits"
         title="{$site.seo_name} - Credits"
         description={$site.credits_text}
         image={$site.seo_share_image.full_url}

src/routes/index.svelte

@@ -27,6 +27,7 @@
 
 <script>
     import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
     import {
         currentLocation,
         currentPhotos,
@@ -55,6 +56,7 @@
 
     // Props and variables
     export let photos
+    const { page } = stores()
 
     // Reset current location if existing
     $: {
@@ -76,7 +78,7 @@
 	<title>{$site.seo_name} - {$site.seo_title_default} planet Earth</title>
     <meta name="description" content={$site.seo_description_default}>
     <SocialMetas
-        url="https://housesof.world"
+        url="https://{$page.host}"
         title="{$site.seo_name} - {$site.seo_title_default} planet Earth"
         description={$site.seo_description_default}
         image={$site.seo_share_image.full_url}

src/routes/location/[country]/[place].svelte

@@ -32,7 +32,6 @@
         pageTransition
     } from '../../../utils/store'
     import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
-    const { page } = stores()
 
     // Dependencies
     import lazySizes from 'lazysizes'
@@ -54,6 +53,7 @@
 
     // Props and variables
     export let photos
+    const { page } = stores()
     let layoutSetting
 
     // Update current location
@@ -99,7 +99,7 @@
     <title>{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}</title>
     <meta name="description" content="{$site.seo_name} {location.name} {location.description}">
     <SocialMetas
-        url="https://housesof.world/location/{location.country.slug}/{location.slug}"
+        url="https://{$page.host}/location/{location.country.slug}/{location.slug}"
         title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
         description="{$site.seo_name} {location.name} {location.description}"
         image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}