refactor: 🏷️ update types for json-ld

spences10 · Jan 6, 2024 · f01c8b7 · f01c8b7
1 parent 65edcc4
commit f01c8b7
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 32 deletions.
diff --git a/packages/svead/src/lib/components/head.svelte b/packages/svead/src/lib/components/head.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { AuthorType, MainEntity } from '$lib/types';
-	import type { MainEntityType } from '../main-entity-types';
-	import type { SchemaOrgProps } from './schema-org-props';
+	import type { AuthorType, MainEntity } from '$lib/types.js';
+	import type { MainEntityType } from '../main-entity-types.js';
+	import type { SchemaOrgProps } from './schema-org-props.js';
 	import SchemaOrg from './schema-org.svelte';
 
 	// Required props
@@ -31,12 +31,12 @@
 		datePublished,
 		dateModified,
 		author: {
-			type: authorType,
+			'@type': authorType,
 			name: authorName,
 			url: authorUrl,
 		},
 		publisher: {
-			type: 'Organization',
+			'@type': 'Organization',
 			name: website,
 			logo: '',
 		},

diff --git a/packages/svead/src/lib/components/schema-org.svelte b/packages/svead/src/lib/components/schema-org.svelte
@@ -1,39 +1,72 @@
 <script lang="ts">
+	import type { JsonLdMainEntity } from '$lib/types.js';
 	import type { SchemaOrgProps } from './schema-org-props.js';
 
 	export let schemaOrgProps: SchemaOrgProps;
 
-	const mainEntity = schemaOrgProps.mainEntity;
-	const jsonLd = {
+	const {
+		url,
+		title,
+		description,
+		website,
+		authorName,
+		authorType,
+		authorUrl,
+		image,
+		datePublished,
+		dateModified,
+		language,
+		mainEntity: { type, headline },
+		breadcrumbs,
+	} = schemaOrgProps;
+
+	const jsonLd: JsonLdMainEntity = {
 		'@context': 'https://schema.org',
-		'@type': mainEntity.type,
-		name: mainEntity.name,
-		url: mainEntity.url,
-		headline: mainEntity.headline,
-		description: mainEntity.description,
-		image: mainEntity.image,
-		datePublished: mainEntity.datePublished,
-		dateModified: mainEntity.dateModified,
+		'@type': type,
+		type: type,
+		name: title,
+		headline: headline,
+		description: description,
+		url: url,
+		image: image || '',
+		datePublished: datePublished || '',
+		dateModified: dateModified || '',
+		inLanguage: language,
 		author: {
-			'@type': mainEntity.author.type,
-			name: mainEntity.author.name,
-			url: mainEntity.author.url,
+			'@type': authorType || 'Person',
+			name: authorName || '',
+			url: authorUrl || '',
 		},
 		publisher: {
-			'@type': mainEntity.publisher.type,
-			name: mainEntity.publisher.name,
-			logo: mainEntity.publisher.logo,
+			'@type': 'Organization',
+			name: website || '',
+			url: url,
+			logo: image || '',
+		},
+		mainEntityOfPage: {
+			'@type': 'WebPage',
+			'@id': url,
 		},
+		// ... include additional properties as needed
 	};
 
-	const jsonLdString = JSON.stringify(jsonLd);
-	const jsonLdScript = `
-    <script type="application/ld+json">
-      ${jsonLdString}
-		${'<'}/script>
-  `;
+	// Adding breadcrumbs if they exist
+	if (breadcrumbs && breadcrumbs.length) {
+		jsonLd['breadcrumb'] = {
+			'@type': 'BreadcrumbList',
+			itemListElement: breadcrumbs.map((item, index) => ({
+				'@type': 'ListItem',
+				position: index + 1,
+				item: {
+					'@id': item.url,
+					name: item.name,
+					url: item.url,
+				},
+			})),
+		};
+	}
 </script>
 
-<svelte:head>
-	{@html jsonLdScript}
-</svelte:head>
+<svelte:element this="script" type="application/ld+json">
+	{@html JSON.stringify(jsonLd)}
+</svelte:element>
diff --git a/packages/svead/src/lib/types.ts b/packages/svead/src/lib/types.ts
@@ -13,19 +13,52 @@ interface CommonEntity {
 }
 
 export interface AuthorEntity {
-	type: AuthorType;
+	'@type': AuthorType;
+	type?: AuthorType;
 	name: string;
 	url: string;
 }
 
 export interface PublisherEntity {
-	type: 'Organization';
+	'@type': 'Organization';
 	name: string;
 	logo: string;
+	url?: string;
+}
+
+export interface BreadcrumbItem {
+	name: string;
+	url: string;
 }
 
 export interface MainEntity extends CommonEntity {
 	type: MainEntityType;
 	author: AuthorEntity;
 	publisher: PublisherEntity;
+	breadcrumb?: {
+		'@type': 'BreadcrumbList';
+		itemListElement: {
+			'@type': 'ListItem';
+			position: number;
+			item: BreadcrumbItem;
+		}[];
+	};
+}
+
+export interface JsonLdMainEntity extends MainEntity {
+	'@context': string;
+	'@type': MainEntityType;
+	inLanguage?: string;
+	breadcrumb?: {
+		'@type': 'BreadcrumbList';
+		itemListElement: {
+			'@type': 'ListItem';
+			position: number;
+			item: BreadcrumbItem;
+		}[];
+	};
+	mainEntityOfPage?: {
+		'@type': string;
+		'@id': string;
+	};
 }
diff --git a/packages/svead/vitest.config.ts b/packages/svead/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+	viteConfig,
+	defineConfig({
+		test: {
+			include: ['src/**/*.test.{js,ts,svelte}'],
+			globals: true,
+			environment: 'jsdom',
+			coverage: {
+				all: false,
+				thresholds: {
+					statements: 75,
+					branches: 84,
+					functions: 68,
+					lines: 75,
+				},
+			},
+		},
+	}),
+);