fix: head for blog post + meta (#903)

AmadeusITGroup · Sep 4, 2024 · 1adee19 · 1adee19
1 parent 1f9e05f
commit 1adee19
Show file tree

Hide file tree

Showing 17 changed files with 61 additions and 80 deletions.
diff --git a/demo/src/app.html b/demo/src/app.html
@@ -5,41 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/agnosui-logo.svg" />
 		%sveltekit.head%
-		<!-- Search Engine -->
-		<meta
-			name="description"
-			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
-		/>
 		<meta name="image" content="%sveltekit.assets%/agnosui-logo.svg" />
-		<!-- Schema.org for Google -->
-		<meta itemprop="name" content="AgnosUI - Where web components shine" />
-		<meta
-			itemprop="description"
-			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
-		/>
-		<meta itemprop="image" content="%sveltekit.assets%/agnosui-logo.svg" />
-		<!-- Twitter -->
-		<meta name="twitter:card" content="summary_large_image" />
-		<meta name="twitter:title" content="AgnosUI - Where web components shine" />
-		<meta property="twitter:domain" content="amadeusitgroup.github.io" />
-		<meta property="twitter:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/" />
-		<meta name="twitter:image" content="https://amadeusitgroup.github.io/AgnosUI/latest/agnosui-logo.png" />
-		<meta name="twitter:image:alt" content="Icon of AgnosUI" />
-		<meta
-			name="twitter:description"
-			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
-		/>
-		<!-- Open Graph general (Facebook, Pinterest & Google+) -->
-		<meta name="og:title" content="AgnosUI - Where web components shine" />
-		<meta
-			name="og:description"
-			content="Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition."
-		/>
-		<meta name="og:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/" />
-		<meta name="og:site_name" content="AgnosUI" />
-		<meta name="og:locale" content="en" />
-		<meta name="og:type" content="website" />
-		<meta property="og:image" content="https://amadeusitgroup.github.io/AgnosUI/latest/agnosui-logo.png" />
 		<script>
 			const theme = localStorage.getItem('theme');
 			if (theme === 'dark' || ((theme === 'auto' || !theme) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

diff --git a/demo/src/lib/layout/Published.svelte b/demo/src/lib/layout/Published.svelte
@@ -22,13 +22,13 @@
 	export let date;
 	export let author: keyof typeof authorLogo;
 
-	$: encodedUrl = encodeURIComponent(`https://amadeusitgroup.github.io/AgnosUI/latest` + $page.url.pathname);
+	$: encodedUrl = encodeURIComponent($page.url.href);
 	$: formattedDate = Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(date));
 </script>
 
 <div class="d-flex flex-wrap">
 	<div class="d-flex gap-3">
-		<img src={authorLogo[author].icon} alt="Publisher avatar" class="avatar" />
+		<img src={authorLogo[author].icon} alt="Publisher avatar" class="avatar" width="50" height="50" />
 		<div>
 			<strong>{authorLogo[author].title}</strong>
 			<div>Published on {formattedDate}</div>

diff --git a/demo/src/resources/images/fbasso.webp b/demo/src/resources/images/fbasso.webp
diff --git a/demo/src/resources/images/tansu-blog.webp b/demo/src/resources/images/tansu-blog.webp
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -70,6 +70,26 @@
 
 <svelte:head>
 	<link rel="canonical" href={$canonicalURL$} />
+	<!-- Schema.org for Google -->
+	<meta itemprop="name" content={$page.data.pageMeta.title} />
+	<meta itemprop="description" content={$page.data.pageMeta.description} />
+	<meta name="description" content={$page.data.pageMeta.description} />
+	<!-- Twitter -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={$page.data.pageMeta.title} />
+	<meta property="twitter:domain" content="amadeusitgroup.github.io" />
+	<meta property="twitter:url" content={$page.data.pageMeta.shareUrl} />
+	<meta name="twitter:image" content={$page.data.pageMeta.socialImage} />
+	<meta name="twitter:image:alt" content={$page.data.pageMeta.socialImageAlt} />
+	<meta name="twitter:description" content={$page.data.pageMeta.description} />
+	<!-- Open Graph general (Facebook, Pinterest & Google+) -->
+	<meta name="og:title" content={$page.data.pageMeta.title} />
+	<meta name="og:description" content={$page.data.pageMeta.description} />
+	<meta name="og:url" content={$page.data.pageMeta.shareUrl} />
+	<meta name="og:site_name" content="AgnosUI" />
+	<meta name="og:locale" content="en" />
+	<meta name="og:type" content="website" />
+	<meta property="og:image" content={$page.data.pageMeta.socialImage} />
 </svelte:head>
 
 <div class="agnos-ui">

diff --git a/demo/src/routes/+layout.ts b/demo/src/routes/+layout.ts
@@ -26,5 +26,13 @@ export const load = async () => {
 	}
 	return {
 		versions,
+		pageMeta: {
+			title: 'AgnosUI - Where web components shine',
+			description:
+				'Perfected component library for Svelte, React and Angular. Reactive and accessible, supports headless or Bootstrap. Providing: accordion, alert, modal, pagination, progressbar, rating, select, slider, toast, focus track, tooltip, pop-over, transition.',
+			socialImage: 'https://amadeusitgroup.github.io/AgnosUI/latest/agnosui-logo.png',
+			socialImageAlt: 'Icon of AgnosUI',
+			shareUrl: 'https://amadeusitgroup.github.io/AgnosUI/latest/',
+		},
 	};
 };
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -10,7 +10,6 @@
 
 <svelte:head>
 	<title>Home page - AgnosUI</title>
-	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
 <!-- TODO make a list of component and iterate over it when needed -->

diff --git a/demo/src/routes/api/[framework]/[type]/[...slug]/+page.server.ts b/demo/src/routes/api/[framework]/[type]/[...slug]/+page.server.ts
@@ -24,6 +24,9 @@ export const load = async ({params}) => {
 		return {
 			slug: params.slug,
 			...file,
+			pageMeta: {
+				description: `API Documentation for ${params.slug.replace('/', ' ').replace('-', ' ')}`,
+			},
 		};
 	}
 };
diff --git a/demo/src/routes/api/[framework]/[type]/[...slug]/+page.svelte b/demo/src/routes/api/[framework]/[type]/[...slug]/+page.svelte
@@ -20,10 +20,6 @@
 	};
 </script>
 
-<svelte:head>
-	<meta name="description" content={`API Documentation for ${data.slug.replace('/', ' ').replace('-', ' ')}`} />
-</svelte:head>
-
 <Header title={data.title} cssFramework={$selectedPackageType$} />
 <Alert type="info" className="p-0 border-0 border-start border-5 border-info" visible dismissible={false}>
 	<div class="alert-container p-3 border border-info rounded-end">

diff --git a/demo/src/routes/blog/2024-02-01/+page.server.ts b/demo/src/routes/blog/2024-02-01/+page.server.ts
@@ -0,0 +1,10 @@
+export const load = () => ({
+	pageMeta: {
+		title: 'State management with Tansu',
+		description:
+			'In AgnosUI, we employ Tansu to handle our widget states. This article explores the effective ways to use Tansu for broader state management, drawing upon our practical experience in developing AgnosUI.',
+		socialImage: 'https://amadeusitgroup.github.io/AgnosUI/static/tansu-blog-social-share.png',
+		socialImageAlt: 'Blog header image',
+		shareUrl: 'https://amadeusitgroup.github.io/AgnosUI/latest/blog/2024-02-01',
+	},
+});
diff --git a/demo/src/routes/blog/2024-02-01/+page.svelte b/demo/src/routes/blog/2024-02-01/+page.svelte
@@ -3,35 +3,17 @@
 	import Published from '$lib/layout/Published.svelte';
 	import Markdown from '$lib/markdown/Markdown.svelte';
 	import source from './tansu-reactivity.md?raw';
-	import headerImg from '$resources/images/tansu-blog.webp';
 
-	const title = 'State management with Tansu';
-	const description =
-		'In AgnosUI, we employ Tansu to handle our widget states. This article explores the effective ways to use Tansu for broader state management, drawing upon our practical experience in developing AgnosUI.';
+	export let data;
 </script>
 
-<svelte:head>
-	<title>{title}</title>
-	<meta name="description" content={description} />
-	<!-- Twitter -->
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="twitter:title" content={title} />
-	<meta property="twitter:domain" content="amadeusitgroup.github.io" />
-	<meta property="twitter:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/blog/2024-02-01" />
-	<meta name="twitter:image" content={headerImg} />
-	<meta name="twitter:image:alt" content="Blog header image" />
-	<meta name="twitter:description" content={description} />
-	<!-- Open Graph general (Facebook, Pinterest & Google+) -->
-	<meta name="og:title" content={title} />
-	<meta name="og:description" content={description} />
-	<meta name="og:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/blog/2024-02-01" />
-	<meta name="og:site_name" content="AgnosUI" />
-	<meta name="og:locale" content="en" />
-	<meta name="og:type" content="website" />
-	<meta property="og:image" content={headerImg} />
-</svelte:head>
-
-<Header {title} />
+<Header title={data.pageMeta.title} />
 <Published date="02/01/2024" author="fbasso" />
-<img src={headerImg} alt="frontend development" class="w-100 mb-3" />
+<img
+	src="https://amadeusitgroup.github.io/AgnosUI/static/tansu-blog.webp"
+	alt="frontend development"
+	class="mb-3"
+	width="100%"
+	style:aspect-ratio={1024 / 500}
+/>
 <Markdown {source} />
diff --git a/demo/src/routes/docs/[framework]/[...slug]/+page.server.ts b/demo/src/routes/docs/[framework]/[...slug]/+page.server.ts
@@ -8,6 +8,9 @@ export const load = async ({params}) => {
 		return {
 			slug: params.slug,
 			...file,
+			pageMeta: {
+				description: `Documentation for ${params.slug.replace('/', ' ').replace('-', ' ')}`,
+			},
 		};
 	}
 };
diff --git a/demo/src/routes/docs/[framework]/[...slug]/+page.svelte b/demo/src/routes/docs/[framework]/[...slug]/+page.svelte
@@ -4,8 +4,4 @@
 	// TODO replace the description using front-matter
 </script>
 
-<svelte:head>
-	<meta name="description" content={`Documentation for ${data.slug.replace('/', ' ').replace('-', ' ')}`} />
-</svelte:head>
-
 <Markdown source={data.content} />
diff --git a/demo/src/routes/docs/[framework]/components/[component]/api/+page.server.ts b/demo/src/routes/docs/[framework]/components/[component]/api/+page.server.ts
@@ -14,6 +14,9 @@ export const load = async ({params}) => {
 			component: params.component,
 			...file,
 			title: params.component.slice(0, 1).toUpperCase() + params.component.slice(1),
+			pageMeta: {
+				description: `API Documentation for ${params.component}`,
+			},
 		};
 	}
 };
diff --git a/demo/src/routes/docs/[framework]/components/[component]/api/+page.svelte b/demo/src/routes/docs/[framework]/components/[component]/api/+page.svelte
@@ -18,10 +18,6 @@
 	};
 </script>
 
-<svelte:head>
-	<meta name="description" content={`API Documentation for ${data.component}`} />
-</svelte:head>
-
 {#if data.import}
 	<Alert type="info" className="p-0 border-0 border-start border-5 border-info" visible dismissible={false}>
 		<div class="alert-container p-3 border border-info rounded-end">

diff --git a/demo/src/routes/docs/[framework]/daisyUI/[component]/api/+page.server.ts b/demo/src/routes/docs/[framework]/daisyUI/[component]/api/+page.server.ts
@@ -14,6 +14,9 @@ export const load = async ({params}) => {
 			component: params.component,
 			...file,
 			title: params.component.slice(0, 1).toUpperCase() + params.component.slice(1),
+			pageMeta: {
+				description: `API Documentation for ${params.component}`,
+			},
 		};
 	}
 };
diff --git a/demo/src/routes/docs/[framework]/daisyUI/[component]/api/+page.svelte b/demo/src/routes/docs/[framework]/daisyUI/[component]/api/+page.svelte
@@ -18,10 +18,6 @@
 	};
 </script>
 
-<svelte:head>
-	<meta name="description" content={`API Documentation for ${data.component}`} />
-</svelte:head>
-
 {#if data.import}
 	<Alert type="info" className="p-0 border-0 border-start border-5 border-info" visible dismissible={false}>
 		<div class="alert-container p-3 border border-info rounded-end">