refactor: use metadata and JsonLd

bjerkio · Jun 25, 2023 · acd63b4 · acd63b4
1 parent ff64b2b
commit acd63b4
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
 		"eslint-plugin-svelte": "^2.26.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
-		"schema-dts": "^1.1.2",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"tslib": "^2.4.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/metadata.svelte b/src/components/metadata.svelte
@@ -1,10 +1,46 @@
 <script lang="ts">
-	import type { WithContext, Thing } from 'schema-dts';
-	import { serializeSchema } from '../utils';
+  import { MetaTags, type MetaTagsProps } from 'svelte-meta-tags';
+	import type { Seo } from '../data/types';
+	import dedent from 'dedent';
+	import { urlFor } from '../data/sanity-client-browser';
 
-	export let schema: WithContext<Thing>;
+	export let title: string | undefined = undefined;
+	export let description: string | undefined = undefined;
+	export let data: MetaTagsProps = {};
+	export let seo: Seo | null = null;
+
+	export let defaultImage = '/assets/bjerk-default-seo.png';
+
+	export let image: string = seo?.image
+		? urlFor(seo.image.asset).size(1200, 630).url()
+		: defaultImage;
+
+	data.title = data.title ?? title;
+	const defaultDescription = dedent`
+    Bjerk er et dialogdrevet byrå innen digital produktutvikling og programvareutvikling. 
+    De siste 12 årene har vi endret måten mennesker lærer, tenker, jobber, og kommuniserer
+    innen eiendom, regnskap og forvaltning.
+  `;
 </script>
 
-<svelte:head>
-	{@html serializeSchema(schema)}
-</svelte:head>
+<MetaTags
+	{...data}
+	titleTemplate={data.title ? '%s – Bjerk' : 'Bjerk - Digitale produktutviklere'}
+	description={seo?.description ?? description ?? data.description ?? defaultDescription}
+	openGraph={{
+		site_name: 'Bjerk',
+		title: seo?.title ?? data.title ?? 'Bjerk',
+		description: seo?.description ?? data.description ?? defaultDescription,
+		images: [
+			{
+				url: image
+			}
+		]
+	}}
+	twitter={{
+		cardType: 'summary_large_image',
+		title: seo?.title ?? data.title ?? 'Bjerk',
+		description: seo?.description ?? data.description ?? defaultDescription,
+		image: image
+	}}
+/>
diff --git a/src/components/seo.svelte b/src/components/seo.svelte
diff --git a/src/routes/(default)/about/+page.svelte b/src/routes/(default)/about/+page.svelte
@@ -1,9 +1,9 @@
 <script>
-	import Seo from '../../../components/seo.svelte';
+	import Metadata from '$components/metadata.svelte';
 	import Employees from './employees.svelte';
 </script>
 
-<Seo title="Om oss" />
+<Metadata title="Om oss" />
 
 <div class="container">
 	<div class="section">

diff --git a/src/routes/(default)/about/employee.svelte b/src/routes/(default)/about/employee.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import type { WithContext, Person } from 'schema-dts';
 	import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
 	import LinkedinLogo from 'phosphor-svelte/lib/LinkedinLogo';
-	import Metadata from '$components/metadata.svelte';
 	import Image from '$components/image.svelte';
+	import { JsonLd } from 'svelte-meta-tags';
 
 	export let givenName: string;
 	export let familyName: string;
@@ -21,8 +20,9 @@
 	export let image: any;
 
 	const name = `${givenName} ${familyName}`;
+</script>
 
-	const person: WithContext<Person> = {
+<JsonLd schema={{
 		'@context': 'https://schema.org',
 		'@type': 'Person',
 		givenName,
@@ -39,10 +39,7 @@
 				}
 			}
 		]
-	};
-</script>
-
-<Metadata schema={person} />
+	}} />
 
 <div class="employee">
 	<Image src={image} class="profile-image" alt={name} />

diff --git a/src/routes/(default)/principles/+page.svelte b/src/routes/(default)/principles/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-	import Seo from '../../../components/seo.svelte';
+	import Metadata from '$components/metadata.svelte';
 </script>
 
-<Seo title="Prinsipper" />
+<Metadata title="Prinsipper" />
 
 <div class="container">
 	<div class="section">

diff --git a/src/routes/(default)/projects/+page.svelte b/src/routes/(default)/projects/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import Seo from '../../../components/seo.svelte';
+	import Metadata from '$components/metadata.svelte';
 	import type { PageData } from './$types';
 	import ProjectItem from './project-item.svelte';
 	export let data: PageData;
 </script>
 
-<Seo title="Prosjekter" />
+<Metadata title="Prosjekter" />
 
 <div class="container projects">
 	{#each data.projects as project}

diff --git a/src/routes/(default)/projects/[slug]/+page.svelte b/src/routes/(default)/projects/[slug]/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import InlineImage from '../../../../components/inline-image.svelte';
+	import InlineImage from '$components/inline-image.svelte';
 	import type { PageData } from './$types';
 	import { PortableText } from '@portabletext/svelte';
-	import Seo from '../../../../components/seo.svelte';
+	import Metadata from '$components/metadata.svelte';
 	export let data: PageData;
 
 	const { project } = data;
 </script>
 
-<Seo
+<Metadata
 	title={project.name}
 	description={project.description}
 	seo={project.seo}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import type { WithContext, LocalBusiness } from 'schema-dts';
-	import Metadata from '../components/metadata.svelte';
+	import { JsonLd } from 'svelte-meta-tags';
+</script>
 
-	const localBusiness: WithContext<LocalBusiness> = {
+<JsonLd
+	schema={{
 		'@context': 'https://schema.org',
 		'@type': 'LocalBusiness',
 		name: 'Bjerk AS',
@@ -20,10 +21,8 @@
 			postalCode: '0180',
 			addressCountry: 'NO'
 		}
-	};
-</script>
-
-<Metadata schema={localBusiness} />
+	}}
+/>
 
 <slot>
 	<!-- +page.svelte is rendered here -->

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,12 +1,12 @@
 <script>
-	import Footer from '../components/footer.svelte';
-	import Header from '../components/header.svelte';
-	import Seo from '../components/seo.svelte';
+	import Footer from '$components/footer.svelte';
+	import Header from '$components/header.svelte';
+	import Metadata from '$components/metadata.svelte';
 	import Feature from './feature.svelte';
 	import Hero from './hero.svelte';
 </script>
 
-<Seo />
+<Metadata />
 
 <div class="homepage-container">
 	<div class="container">

diff --git a/src/routes/assets/graph/[slug].svg/+server.ts b/src/routes/assets/graph/[slug].svg/+server.ts
@@ -40,7 +40,7 @@ export async function GET({ params }) {
     <div xmlns="http://www.w3.org/1999/xhtml" style="height:100%;padding:64px;color:#0F2040;display:flex;max-width:80ch;flex-direction:column;justify-content:space-between;gap:32px">
       <img src="https://bjerk.io/assets/logo.svg" style="width: 100px" />
       <h1 xmlns="http://www.w3.org/1999/xhtml" style="font-size:48px;font-weight:400">
-        <strong>Case:</strong> ${project.title ?? project.name}
+        ${project.title ?? project.name}
       </h1>
     </div>
   </foreignObject>