feata: METADATA!

src/markdoc/layouts/Tutorial.svelte

@@ -9,12 +9,12 @@
 <script lang="ts">
 	import { DocsTutorial } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
-	import { MainFooter, Metadata } from '$lib/components';
+	import { MainFooter } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { writable } from 'svelte/store';
 	import type { LayoutContext } from './Article.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
-	import { setMetadata } from '$lib/components/Metadata.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 
 	export let title: string;
 	export let description: string;
@@ -51,12 +51,26 @@
 		return carry;
 	}, []);
 
-	setMetadata({
-		title: title + DOCS_TITLE_SUFFIX,
-		description
-	});
+	const seoTitle = title + DOCS_TITLE_SUFFIX;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>
 
+<svelte:head>
+	<!-- Titles -->
+	<title>{seoTitle}</title>
+	<meta property="og:title" content={seoTitle} />
+	<meta name="”twitter:title”" content={seoTitle} />
+	<!-- Desscription -->
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="”twitter:description" content={description} />
+	<!-- Image -->
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
 <DocsTutorial {title} {toc} {tutorials} currentStep={step}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}