From 11276aa3739da6bb6454f3d67ba9d6693b880b15 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Wed, 13 Mar 2024 00:31:02 +0700
Subject: [PATCH] feat: use new page header layout for posts

---
 package-lock.json                                  | 14 +++++++-------
 package.json                                       |  4 ++--
 ...ero.svelte => ResponsivePageHeaderImage.svelte} |  0
 src/routes/[tag]/+page.svelte                      |  3 +--
 src/routes/[tag]/[slug]/+page.svelte               |  5 ++---
 src/routes/author/[author]/+page.svelte            |  3 +--
 6 files changed, 13 insertions(+), 16 deletions(-)
 rename src/lib/components/{ResponsiveHero.svelte => ResponsivePageHeaderImage.svelte} (100%)

diff --git a/package-lock.json b/package-lock.json
index 6afd1c0..5eca040 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e4f1cb7..4b87398 100644
--- a/package.json
+++ b/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"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/ResponsiveHero.svelte b/src/lib/components/ResponsivePageHeaderImage.svelte
similarity index 100%
rename from src/lib/components/ResponsiveHero.svelte
rename to src/lib/components/ResponsivePageHeaderImage.svelte
diff --git a/src/routes/[tag]/+page.svelte b/src/routes/[tag]/+page.svelte
index bc62f25..cd7c223 100644
--- a/src/routes/[tag]/+page.svelte
+++ b/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}
diff --git a/src/routes/[tag]/[slug]/+page.svelte b/src/routes/[tag]/[slug]/+page.svelte
index cc04791..46aa184 100644
--- a/src/routes/[tag]/[slug]/+page.svelte
+++ b/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}
diff --git a/src/routes/author/[author]/+page.svelte b/src/routes/author/[author]/+page.svelte
index 1f34dae..9746221 100644
--- a/src/routes/author/[author]/+page.svelte
+++ b/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}