Refactor SEO components

Fixes #848
maiertech · Jul 28, 2024 · 25f9ec3 · 25f9ec3
1 parent ae3b438
commit 25f9ec3
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 344 deletions.
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@maiertech/sveltekit-helpers": "^0.7.0",
-		"@playwright/test": "^1.45.2",
+		"@maiertech/sveltekit-helpers": "^0.9.0",
+		"@playwright/test": "^1.45.3",
 		"@sindresorhus/slugify": "^2.2.1",
 		"@stackblitz/sdk": "^1.11.0",
 		"@sveltejs/adapter-vercel": "^5.4.1",
@@ -22,23 +22,22 @@
 		"@types/rss": "^0.0.32",
 		"@unpic/svelte": "^0.0.53",
 		"@vercel/analytics": "^1.3.1",
-		"eslint": "^9.7.0",
+		"eslint": "^9.8.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-jsdoc": "^48.8.0",
+		"eslint-plugin-jsdoc": "^48.8.3",
 		"eslint-plugin-svelte": "^2.43.0",
 		"globals": "^15.8.0",
 		"iconify-icon": "^2.1.0",
 		"open-props": "^1.7.5",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"rss": "^1.2.2",
-		"schema-dts": "^1.1.2",
 		"svelte": "^4.2.18",
 		"svelte-check": "^3.8.4",
 		"svelte-highlight": "^7.7.0",
 		"sveltekit-embed": "^0.0.12",
-		"typescript": "^5.5.3",
-		"vite": "^5.3.4",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5",
 		"zod": "^3.23.8"
 	},
 	"type": "module"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -6,9 +6,9 @@ declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
-		// interface PageData {
-		// 	seo: SeoData;
-		// }
+		interface PageData {
+			seo: SeoData;
+		}
 		// interface PageState {}
 		// interface Platform {}
 	}

diff --git a/src/lib/components/index.js b/src/lib/components/index.js
@@ -6,5 +6,3 @@ export { default as Header } from './header.svelte';
 export { default as Image } from './image.svelte';
 export { default as PostPreview } from './post-preview.svelte';
 export { default as Posts } from './posts.svelte';
-export { default as SeoHomepageSupplement } from './seo-homepage-supplement.svelte';
-export { default as Seo } from './seo.svelte';
diff --git a/src/lib/components/seo-homepage-supplement.svelte b/src/lib/components/seo-homepage-supplement.svelte
diff --git a/src/lib/components/seo-post-supplement.svelte b/src/lib/components/seo-post-supplement.svelte
diff --git a/src/lib/components/seo-website-supplement.svelte b/src/lib/components/seo-website-supplement.svelte
diff --git a/src/lib/components/seo.svelte b/src/lib/components/seo.svelte
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
@@ -1,19 +1,13 @@
-import { linkSchema, seoSchema, subscribeFormSchema } from '$lib/schemas';
-import { EmbedOptions, Project } from '@stackblitz/sdk';
-import { BlogPosting, WebSite, WithContext } from 'schema-dts';
+import type { linkSchema, seoSchema, subscribeFormSchema } from '$lib/schemas';
+import type { EmbedOptions, Project } from '@stackblitz/sdk';
 import type { ComponentType } from 'svelte';
-import { z } from 'zod';
+import type { z } from 'zod';
 
 // Inferred from local schemas.
 
 export type SeoData = z.infer<typeof seoSchema>;
 export type SubscribeForm = z.infer<typeof subscribeFormSchema>;
 
-// Schema.org
-
-export type BlogPosting = WithContext<BlogPosting>;
-export type WebSite = WithContext<WebSite>;
-
 // Other types.
 
 export type Color = 'brand' | 'accent';

diff --git a/src/lib/utils/decorate.js b/src/lib/utils/decorate.js
diff --git a/src/lib/utils/serialize.js b/src/lib/utils/serialize.js
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte
@@ -1,11 +1,9 @@
 <script>
-	import { Button, Posts, SeoHomepageSupplement } from '$lib/components';
+	import { Button, Posts } from '$lib/components';
 
 	export let data;
 </script>
 
-<SeoHomepageSupplement name={data.seo.title} url={data.canonical_origin} />
-
 <section class="about">
 	<p>{data.seo.description}</p>
 </section>

diff --git a/src/routes/(posts)/+layout.svelte b/src/routes/(posts)/+layout.svelte
@@ -1,11 +1,12 @@
 <script>
-	import SeoPostSupplement from '$lib/components/seo-post-supplement.svelte';
+	import { SeoLdPost, SeoFediverseCreator } from '@maiertech/sveltekit-helpers';
 	import { ContentLayout, PostHeader } from '@maiertech/sveltekit-helpers';
 
 	export let data;
 </script>
 
-<SeoPostSupplement data={data.resolvedPost} />
+<SeoLdPost post={data.resolvedPost} />
+<SeoFediverseCreator username="@thilo@maier.social" />
 
 <ContentLayout>
 	<PostHeader post={data.resolvedPost} slot="header" />

diff --git a/src/routes/+layout.js b/src/routes/+layout.js
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,9 +1,16 @@
 <script>
 	import { dev } from '$app/environment';
 	import { page } from '$app/stores';
-	import { Favicon, Footer, Header, Seo } from '$lib/components';
-	import { Container, PageLayout } from '@maiertech/sveltekit-helpers';
+	import { Favicon, Footer, Header } from '$lib/components';
+	import {
+		Container,
+		PageLayout,
+		SeoBasic,
+		SeoCanonicalUrl,
+		SeoOgImage
+	} from '@maiertech/sveltekit-helpers';
 	import { inject } from '@vercel/analytics';
+	import { PUBLIC_CANONICAL_ORIGIN } from '$env/static/public';
 
 	import 'open-props/borders';
 	import 'open-props/fonts';
@@ -14,13 +21,13 @@
 	import '$lib/theme.css';
 	import '@maiertech/sveltekit-helpers/styles.css';
 
-	export let data;
-
 	inject({ mode: dev ? 'development' : 'production' });
 </script>
 
-{#if !$page.error}
-	<Seo url={$page.url} canonical_origin={data.canonical_origin} data={$page.data.seo} />
+<SeoBasic title={$page.data.seo.title} description={$page.data.seo.description} />
+<SeoCanonicalUrl origin={PUBLIC_CANONICAL_ORIGIN} canonicalUrl={$page.data.seo.canonical_url} />
+{#if $page.data.seo.og_image_url}
+	<SeoOgImage ogImageUrl={$page.data.seo.og_image_url} />
 {/if}
 
 <Favicon />