From a89f69c69c8879a641b75a9076845ba0707c5ab6 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 28 Apr 2024 01:29:37 +0200
Subject: [PATCH] blogs pages, projs - unfinished

---
 src/routes/blog/+page.svelte            | 111 +++++++++++++-----------
 src/routes/projects/+page.svelte        |   2 +-
 src/routes/projects/[slug]/+page.svelte |   2 +-
 3 files changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index dbb0034..029c931 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,60 +1,73 @@
 <script lang="ts">
-	import PostPreview from '$lib/components/blog/PostPreview.svelte';
-	import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
+	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 Feed from '$lib/components/blog/Feed.svelte';
+
+	import SEO from '$lib/components/SEO/index.svelte';
+	import { website } from '$lib/config';
 	import type { PageData } from './$types';
-	import type { Tag } from '$lib/types/post';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 
 	export let data: PageData;
+	// console.log(data);
 
-	let filter: Tag | null = null;
+	const { author, siteUrl } = website;
 
-	$: posts = data.posts.filter((post) => (filter ? post.tags?.includes(filter) : true));
-
-	onMount(() => {
-		const tagParam = $page.url.searchParams.get('tag');
-
-		if (!filter && typeof tagParam == 'string') {
-			filter = tagParam as Tag;
+	let title = 'Home';
+	let tags = ['blog', '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 = {
+		siteUrl: featuredImageSrc,
+		alt: featuredImageAlt,
+		width: 672,
+		height: 448,
+		caption: 'Home page'
+	};
+	const ogImage = {
+		siteUrl: ogImageSrc,
+		alt: featuredImageAlt
+	};
+	const ogSquareImage = {
+		siteUrl: ogSquareImageSrc,
+		alt: featuredImageAlt
+	};
 
-	const displayAmount = 12;
+	const twitterImage = {
+		siteUrl: twitterImageSrc,
+		alt: featuredImageAlt
+	};
+	const entityMeta = {
+		siteUrl: `${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,
+		tags
+	};
 </script>
 
-<div>
-	<div class="space-y-8">
-		<header class="flex flex-col justify-center items-center">
-			<h1 class="h1 m-4">Blog</h1>
-			<CategoryFilter class="mb-2 md:mb-4" bind:selected={filter} />
-		</header>
-		<div
-			class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
-		>
-			{#each posts.slice(0, displayAmount) as post}
-				<div class="flex justify-center min-w-[20rem] max-w-sm">
-					<PostPreview {post} type="blog" isMostRecent />
-				</div>
-			{/each}
-		</div>
-	</div>
+<SEO {...seoProps} />
 
-	{#if posts.slice(displayAmount).length > 0}
-		<div>
-			<h2 class="mb-4 text-center">Previous posts</h2>
-			<div
-				class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
-			>
-				{#each posts.slice(displayAmount) as post}
-					<div class="flex justify-center min-w-[20rem] max-w-sm">
-						<PostPreview {post} type="blog" />
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style lang="postcss">
-</style>
+<Feed {data} />
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index a4ffd85..cef5611 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import PostPreview from '$lib/components/blog/PostPreview.svelte';
+	import PostPreview from '$lib/components/blog/Preview.svelte';
 
 	export let data: PageData;
 </script>
diff --git a/src/routes/projects/[slug]/+page.svelte b/src/routes/projects/[slug]/+page.svelte
index a7ae0ba..2082604 100644
--- a/src/routes/projects/[slug]/+page.svelte
+++ b/src/routes/projects/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ProjectsContentLayout from '$lib/components/projects/ProjectsContentLayout.svelte';
+	import ProjectsContentLayout from '$lib/components/blog/PostLayout.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;