<script>
	import ogSquareImageSrc from '$lib/assets/home/home-open-graph-square.jpg';
	import ogImageSrc from '$lib/assets/home/home-open-graph.jpg';
	import twitterImageSrc from '$lib/assets/home/home-twitter.jpg';
	import featuredImageSrc from '$lib/assets/home/home.jpg';
	import BlogRoll from '$lib/components/BlogRoll.svelte';
	import Card from '$lib/components/Card.svelte';
	import SEO from '$lib/components/SEO/index.svelte';
	import website from '$lib/config/website';

	/** @type {import('./$types').PageData} */
	let { data } = $props();
	let { posts } = $derived(data);

	const { author, siteUrl } = website;

	let title = 'Home';
	const breadcrumbs = [
		{
			name: 'Home',
			slug: '',
		},
	];
	let metadescription =
		'SvelteKit MDsvex Blog Starter - starter code by Rodney Lab to help you get going on your next blog site';
	const featuredImageAlt =
		'picture of a person with long, curly hair, wearing a red had taking a picture with an analogue camera';
	const featuredImage = {
		url: featuredImageSrc,
		alt: featuredImageAlt,
		width: 672,
		height: 448,
		caption: 'Home page',
	};
	const ogImage = {
		url: ogImageSrc,
		alt: featuredImageAlt,
	};
	const ogSquareImage = {
		url: ogSquareImageSrc,
		alt: featuredImageAlt,
	};

	const twitterImage = {
		url: twitterImageSrc,
		alt: featuredImageAlt,
	};
	const entityMeta = {
		url: `${siteUrl}/`,
		faviconWidth: 512,
		faviconHeight: 512,
		caption: author,
	};
	const seoProps = {
		title,
		slug: '',
		entityMeta,
		datePublished: '2021-07-07T14:19:33.000+0100',
		lastUpdated: '2021-07-07T14:19:33.000+0100',
		breadcrumbs,
		metadescription,
		featuredImage,
		ogImage,
		ogSquareImage,
		twitterImage,
	};
</script>

<SEO {...seoProps} />
<header>
	<h1>Climate &mdash; SvelteKit Starter</h1>
	<h2>SvelteKit Markdown Blog</h2>
</header>
<Card>
	<h2><span>About me</span></h2>
	<p>
		I live and breathe analogue photography. I show you my favourite analogue film cameras on this
		site. Hopefully, if you are not into analogue photography yet, some of my enthusiasm will rub
		off onto you.
	</p>
</Card>
<BlogRoll {posts} />

<style lang="scss">
	header > h2 {
		font-size: variables.$font-size-3;
	}
</style>
