feat: use new page header layout for posts

package-lock.json

@@ -8,7 +8,7 @@
 			"name": "@damillora/shallie",
 			"version": "1.0.0",
 			"dependencies": {
-				"@damillora/plachta": "^3.0.3",
+				"@damillora/plachta": "^4.0.0",
 				"@tryghost/content-api": "^1.11.16",
 				"fitvids": "^2.1.1",
 				"svelte-material-icons": "^3.0.0",
@@ -66,9 +66,9 @@
 			}
 		},
 		"node_modules/@damillora/plachta": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-3.0.3.tgz",
-			"integrity": "sha512-THdsqcprxnjjmF+2nDphj12YCG7sobOHOfNjuJ9g+NJVlYAhR3rmSNUjIipo2FP2yL3txSsGrwdVhdaOmpvlBw==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
+			"integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
 			"dependencies": {
 				"@sveltejs/package": "^2.2.0",
 				"svelte": "^4.1.2",
@@ -4248,9 +4248,9 @@
 			}
 		},
 		"@damillora/plachta": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-3.0.3.tgz",
-			"integrity": "sha512-THdsqcprxnjjmF+2nDphj12YCG7sobOHOfNjuJ9g+NJVlYAhR3rmSNUjIipo2FP2yL3txSsGrwdVhdaOmpvlBw==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@damillora/plachta/-/plachta-4.0.3.tgz",
+			"integrity": "sha512-/mH7xNVgvXxksBCGs+CEFDs2xOpeMKJ8z0PhUwmkUtrWhLBMuIIp1UiSUCRcL1DU7Lxqdel8Hx6Pq1YWWPtJ7Q==",
 			"requires": {
 				"@sveltejs/package": "^2.2.0",
 				"svelte": "^4.1.2",

package.json

@@ -44,10 +44,10 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@damillora/plachta": "^3.0.3",
+		"@damillora/plachta": "^4.0.0",
 		"@tryghost/content-api": "^1.11.16",
 		"fitvids": "^2.1.1",
 		"svelte-material-icons": "^3.0.0",
 		"svelte-themes": "^0.0.98"
 	}
-}
+}

src/routes/[tag]/+page.svelte

@@ -44,11 +44,10 @@
 
 <TagSeo tag={data.tag} />
 
-<Hero background={data.tag.feature_image ?? `/images/default-feature.jpg`} />
-
 <Container>
 	<Post>
 		<TagHeader
+			background={data.tag.feature_image} 
 			accent_color={data.tag.accent_color}
 			name={data.tag.name}
 			description={data.tag.description}

src/routes/[tag]/[slug]/+page.svelte

@@ -25,7 +25,7 @@
 	import PostSeo from '$lib/components/SEO/PostSEO.svelte';
 	import { onMount } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
-	import ResponsiveHero from '$lib/components/ResponsiveHero.svelte';
+	import { generateSrcsetString } from '$lib/content/srcset';
 
 	export let data;
 </script>
@@ -36,11 +36,10 @@
 
 <PostSeo post={data.post} />
 
-<ResponsiveHero background={data.post.feature_image} />
-
 <Container>
 	<Post>
 		<PostHeader
+			background={data.post.feature_image}
 			title={data.post.title}
 			authors={data.post.authors}
 			primary_tag={data.post.primary_tag}

src/routes/author/[author]/+page.svelte

@@ -43,13 +43,12 @@
 	<title>Author: {data.author.name} - Damillora's Virtual Memoir</title>
 </svelte:head>
 
-<Hero background={data.author.cover_image ?? `/images/default-feature.jpg`} />
-
 <AuthorSeo author={data.author} />
 
 <Container>
 	<Post>
 		<AuthorHeader
+			background={data.author.cover_image} 
 			profile_image={data.author.profile_image}
 			name={data.author.name}
 			bio={data.author.bio}