Internalization support

[rallisf1]

Is your feature request related to a problem? Please describe.
When using any type of internalization plugin the meta fields don't update on language change.

Describe the solution you'd like
You should use a store for props object in order to auto refresh the meta-tags with zero-configuration

Describe alternatives you've considered
My workaround for typesafe-i18n is:

import { MetaTags, MetaTagsProps } from 'svelte-meta-tags';
import LL, { locale } from '../i18n/i18n-svelte';
import { locales } from "../i18n/i18n-util";
import { afterUpdate } from 'svelte';

let metaTags: MetaTagsProps = {
	title: '',
	description: '',
	languageAlternates: []
}

afterUpdate(() => {
	[, , ...pageParts] = $page.path.split("/");
	updateMetaLang();
});

function updateMetaLang(){
	let altLangs = [];
	locales.forEach((lang, _) => {
		if(lang != $locale){
			altLangs.push({
				hrefLang: lang,
				href: `https://${$page.host}/${lang}${$page.path.slice(3)}` // it's ugly but it works
			})
		}
	});
	metaTags.languageAlternates = altLangs;
	metaTags.title = LL.site_name();
	metaTags.description = LL.site_description();
}

[samuelstroschein]

When using any type of internalization plugin the meta fields don't update on language change.

That's likely because metaTags is not reactive. You shouldn't need the function updateMetaLang. Try the following:

$: metaTags = {
    title: LL.site_name(),
    description: LL.site_description(),
    languageAlternates: locales.map((locale) => ({ 
      hrefLang: locale,
      href: `https://${$page.host}/${lang}${$page.path.slice(3)}` 
    }))
}

That should be it. The $ prefix makes metaTags reactive. See more here. In a nutshell, metaTags should "rebuild" if for example LL.site_name() changes. Small remark, LL is a reactive store by itself. I am not sure if it will rebuild without the $ prefix. If it doesn't, please try to prefix LL.site_name() with the dollar sign i.e. $LL.site_name()

[samuelstroschein]

Another small remark:
Array.push() is not reactive in Svelte. To add elements to an array in a reactive manner, you need to re-assign the array variable. An elegant workaround is myArray = [...myArray, newElement]. Read more here

[rallisf1]

Thanks for the tips. I tried making metaTags reactive but didn't work, turns out LL needed a $ too...pfff

You may close this, I'm just noob :D

[oekazuma]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀