From 947943b9383b8dd3271da299dfaac46aa9475beb Mon Sep 17 00:00:00 2001
From: spences10 <spences10apps@gmail.com>
Date: Thu, 22 Aug 2024 20:38:14 +0100
Subject: [PATCH] docs: :memo: add in example code to docs

---
 apps/web/src/lib/copy/blog-posting-copy.md    | 112 ++++++++++++
 apps/web/src/lib/copy/breadcrumbs-copy.md     | 119 +++++++++++++
 apps/web/src/lib/copy/index-copy.md           |  11 ++
 .../copy/multiple-ld-json-sections-copy.md    | 162 ++++++++++++++++++
 apps/web/src/lib/copy/news-article-copy.md    | 127 ++++++++++++++
 apps/web/src/lib/copy/web-page-copy.md        |  96 +++++++++++
 apps/web/src/routes/blog-posting/+page.svelte |   4 +
 apps/web/src/routes/blog-posting/+page.ts     |  13 ++
 apps/web/src/routes/breadcrumbs/+page.svelte  |   7 +-
 apps/web/src/routes/breadcrumbs/+page.ts      |  13 ++
 .../multiple-ld-json-sections/+page.svelte    |   5 +
 .../routes/multiple-ld-json-sections/+page.ts |  13 ++
 apps/web/src/routes/news-article/+page.svelte |   4 +
 apps/web/src/routes/news-article/+page.ts     |  13 ++
 apps/web/src/routes/web-page/+page.svelte     |   4 +
 apps/web/src/routes/web-page/+page.ts         |  13 ++
 16 files changed, 715 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/lib/copy/blog-posting-copy.md
 create mode 100644 apps/web/src/lib/copy/multiple-ld-json-sections-copy.md
 create mode 100644 apps/web/src/lib/copy/news-article-copy.md
 create mode 100644 apps/web/src/lib/copy/web-page-copy.md
 create mode 100644 apps/web/src/routes/blog-posting/+page.ts
 create mode 100644 apps/web/src/routes/breadcrumbs/+page.ts
 create mode 100644 apps/web/src/routes/multiple-ld-json-sections/+page.ts
 create mode 100644 apps/web/src/routes/news-article/+page.ts
 create mode 100644 apps/web/src/routes/web-page/+page.ts

diff --git a/apps/web/src/lib/copy/blog-posting-copy.md b/apps/web/src/lib/copy/blog-posting-copy.md
new file mode 100644
index 0000000..44d7e3c
--- /dev/null
+++ b/apps/web/src/lib/copy/blog-posting-copy.md
@@ -0,0 +1,112 @@
+Here's the code for this page:
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/stores';
+	import {
+		Head,
+		SchemaOrg,
+		type SchemaOrgProps,
+		type SeoConfig,
+	} from 'svead';
+
+	export let data;
+	let { Copy } = data;
+
+	const get_current_iso_date = () => new Date().toISOString();
+
+	const seo_config: SeoConfig = {
+		url: $page.url.href,
+		website: 'https://example.com',
+		title: 'My Blog Post',
+		description:
+			'This is an example blog post showcasing the usage of the svead package.',
+		open_graph_image:
+			'https://example.com/images/blog-post-image.jpg',
+		author_name: 'John Doe',
+		language: 'en',
+		twitter_handle: '@johndoe',
+		site_name: 'Example Blog',
+	};
+
+	const schema_org: SchemaOrgProps['schema'] = {
+		'@type': 'WebPage',
+		'@id': $page.url.href,
+		url: $page.url.href,
+		name: seo_config.title,
+		description: seo_config.description,
+		inLanguage: seo_config.language,
+		...(seo_config.website && {
+			isPartOf: {
+				'@type': 'WebSite',
+				'@id': seo_config.website,
+			},
+		}),
+		...(seo_config.open_graph_image && {
+			primaryImageOfPage: {
+				'@type': 'ImageObject',
+				url: seo_config.open_graph_image,
+			},
+		}),
+		datePublished: get_current_iso_date(),
+		dateModified: get_current_iso_date(),
+		author: {
+			'@type': 'Person',
+			name: seo_config.author_name,
+			...(seo_config.website && {
+				url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
+			}),
+		},
+		potentialAction: [
+			{
+				'@type': 'ReadAction',
+				target: $page.url.href,
+			},
+		],
+		mainEntity: {
+			'@type': 'BlogPosting',
+			'@id': `${$page.url.href}#article`,
+			headline: seo_config.title,
+			description: seo_config.description,
+			...(seo_config.open_graph_image && {
+				image: seo_config.open_graph_image,
+			}),
+			datePublished: get_current_iso_date(),
+			dateModified: get_current_iso_date(),
+			author: {
+				'@type': 'Person',
+				name: seo_config.author_name,
+				...(seo_config.website && {
+					url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
+				}),
+			},
+			publisher: {
+				'@type': 'Organization',
+				name: seo_config.site_name,
+				...(seo_config.website && { url: seo_config.website }),
+				...(seo_config.website && {
+					logo: {
+						'@type': 'ImageObject',
+						url: `${seo_config.website}/logo.png`,
+					},
+				}),
+			},
+			mainEntityOfPage: {
+				'@type': 'WebPage',
+				'@id': $page.url.href,
+			},
+			inLanguage: seo_config.language,
+		},
+	};
+</script>
+
+<Head {seo_config} />
+<SchemaOrg schema={schema_org} />
+
+<article>
+	<h1>{seo_config.title}</h1>
+	<p>{seo_config.description}</p>
+	<!-- Rest of your blog post content -->
+	<Copy />
+</article>
+```
diff --git a/apps/web/src/lib/copy/breadcrumbs-copy.md b/apps/web/src/lib/copy/breadcrumbs-copy.md
index e69de29..db7a662 100644
--- a/apps/web/src/lib/copy/breadcrumbs-copy.md
+++ b/apps/web/src/lib/copy/breadcrumbs-copy.md
@@ -0,0 +1,119 @@
+Here's the code for this page:
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { SchemaOrgProps, SeoConfig } from 'svead';
+	import { Head, SchemaOrg } from 'svead';
+
+	export let data;
+	let { Copy } = data;
+
+	// Example data for the webpage
+	const page_title = 'Sample Web Page';
+	const page_description =
+		'This is an example of a web page with enhanced SEO features.';
+
+	const seo_config: SeoConfig = {
+		title: 'Example Page Title',
+		description: 'This is an example description of the web page.',
+		url: $page.url.href,
+		website: 'https://www.example.com',
+		open_graph_image: 'https://www.example.com/og-image.jpg',
+		language: 'en',
+		author_name: 'Author Name',
+		twitter_handle: '@example',
+		site_name: 'Example Site',
+	};
+
+	// Function to get current date in ISO format
+	const get_current_iso_date = () => new Date().toISOString();
+
+	const schema_org: SchemaOrgProps['schema'] = {
+		'@type': 'WebPage',
+		'@id': $page.url.href,
+		url: $page.url.href,
+		name: 'Example Page Title',
+		description: 'This is an example description of the web page.',
+		inLanguage: 'en',
+		isPartOf: {
+			'@id': 'https://www.example.com',
+		},
+		breadcrumb: {
+			'@type': 'BreadcrumbList',
+			'@id': `${$page.url.href}#breadcrumb`,
+			name: 'Breadcrumb',
+			itemListElement: [
+				{
+					'@type': 'ListItem',
+					position: 1,
+					name: 'Home',
+					item: 'https://www.example.com',
+				},
+				{
+					'@type': 'ListItem',
+					position: 2,
+					name: 'Category',
+					item: 'https://www.example.com/category',
+				},
+				{
+					'@type': 'ListItem',
+					position: 3,
+					name: 'Example Page Title',
+					item: $page.url.href,
+				},
+			],
+		},
+		primaryImageOfPage: {
+			'@type': 'ImageObject',
+			url: 'https://www.example.com/og-image.jpg',
+		},
+		datePublished: get_current_iso_date(),
+		dateModified: get_current_iso_date(),
+		author: {
+			'@type': 'Person',
+			name: 'Author Name',
+			url: 'https://www.example.com/author',
+		},
+		potentialAction: [
+			{
+				'@type': 'ReadAction',
+				target: $page.url.href,
+			},
+		],
+		mainEntity: {
+			'@type': 'Article',
+			'@id': `${$page.url.href}#article`,
+			isPartOf: {
+				'@id': 'https://www.example.com',
+			},
+			author: {
+				'@type': 'Person',
+				name: 'Author Name',
+				url: 'https://www.example.com/author',
+			},
+			headline: 'Example Article Headline',
+			datePublished: get_current_iso_date(),
+			dateModified: get_current_iso_date(),
+			publisher: {
+				'@type': 'Organization',
+				name: 'Publisher Name',
+				url: 'https://www.example.com/publisher',
+			},
+			image: {
+				'@type': 'ImageObject',
+				url: 'https://www.example.com/og-image.jpg',
+			},
+			articleSection: ['News', 'Technology'],
+		},
+	};
+</script>
+
+<Head {seo_config} />
+<SchemaOrg schema={schema_org} />
+
+<h1>{page_title}</h1>
+<p>{page_description}</p>
+
+<Copy />
+```
diff --git a/apps/web/src/lib/copy/index-copy.md b/apps/web/src/lib/copy/index-copy.md
index a4cd850..4dc77a5 100644
--- a/apps/web/src/lib/copy/index-copy.md
+++ b/apps/web/src/lib/copy/index-copy.md
@@ -20,6 +20,17 @@ Svead provides two main components:
 1. `Head`: For setting meta tags and other head information.
 2. `SchemaOrg`: For adding structured data using JSON-LD.
 
+## Example Routes
+
+Explore how Svead works with different content types:
+
+- [Breadcrumbs](/breadcrumbs)
+- [Article](/article)
+- [Blog Posting](/blog-posting)
+- [News Article](/news-article)
+- [Web Page](/web-page)
+- [Multiple JSON-LD Sections](/multiple-ld-json-sections)
+
 ## Head Component
 
 ### Usage
diff --git a/apps/web/src/lib/copy/multiple-ld-json-sections-copy.md b/apps/web/src/lib/copy/multiple-ld-json-sections-copy.md
new file mode 100644
index 0000000..c859b9e
--- /dev/null
+++ b/apps/web/src/lib/copy/multiple-ld-json-sections-copy.md
@@ -0,0 +1,162 @@
+Here's the code for this page:
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/stores';
+	import {
+		Head,
+		SchemaOrg,
+		type SchemaOrgProps,
+		type SeoConfig,
+	} from 'svead';
+
+	export let data;
+	let { Copy } = data;
+
+	const get_current_iso_date = () => new Date().toISOString();
+
+	const seo_config: SeoConfig = {
+		url: $page.url.href,
+		website: 'https://example.com',
+		title: 'How to Use Structured Data in SvelteKit',
+		description:
+			'Learn how to implement structured data in your SvelteKit project for better SEO.',
+		open_graph_image:
+			'https://example.com/images/structured-data-cover.jpg',
+		author_name: 'Jane Doe',
+		language: 'en',
+		twitter_handle: '@janedoe',
+		site_name: 'SvelteKit SEO Guide',
+	};
+
+	const schema_org: SchemaOrgProps['schema'] = {
+		'@type': 'WebPage',
+		'@id': $page.url.href,
+		url: $page.url.href,
+		name: seo_config.title,
+		description: seo_config.description,
+		inLanguage: seo_config.language,
+		...(seo_config.website && {
+			isPartOf: {
+				'@type': 'WebSite',
+				'@id': seo_config.website,
+			},
+		}),
+		...(seo_config.open_graph_image && {
+			primaryImageOfPage: {
+				'@type': 'ImageObject',
+				url: seo_config.open_graph_image,
+			},
+		}),
+		datePublished: get_current_iso_date(),
+		dateModified: get_current_iso_date(),
+		author: {
+			'@type': 'Person',
+			name: seo_config.author_name,
+			...(seo_config.website && {
+				url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
+			}),
+		},
+		breadcrumb: {
+			'@type': 'BreadcrumbList',
+			'@id': `${$page.url.href}#breadcrumb`,
+			name: 'Breadcrumb',
+			itemListElement: [
+				{
+					'@type': 'ListItem',
+					position: 1,
+					name: 'Home',
+					item: seo_config.website,
+				},
+				{
+					'@type': 'ListItem',
+					position: 2,
+					name: 'Blog',
+					item: `${seo_config.website}/blog`,
+				},
+				{
+					'@type': 'ListItem',
+					position: 3,
+					name: seo_config.title,
+					item: $page.url.href,
+				},
+			],
+		},
+		mainEntity: {
+			'@type': 'BlogPosting',
+			'@id': `${$page.url.href}#article`,
+			headline: seo_config.title,
+			description: seo_config.description,
+			...(seo_config.open_graph_image && {
+				image: seo_config.open_graph_image,
+			}),
+			datePublished: get_current_iso_date(),
+			dateModified: get_current_iso_date(),
+			author: {
+				'@type': 'Person',
+				name: seo_config.author_name,
+				...(seo_config.website && {
+					url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
+				}),
+			},
+			publisher: {
+				'@type': 'Organization',
+				name: seo_config.site_name,
+				...(seo_config.website && { url: seo_config.website }),
+				...(seo_config.website && {
+					logo: {
+						'@type': 'ImageObject',
+						url: `${seo_config.website}/logo.png`,
+					},
+				}),
+			},
+			mainEntityOfPage: {
+				'@type': 'WebPage',
+				'@id': $page.url.href,
+			},
+			inLanguage: seo_config.language,
+			keywords: ['SvelteKit', 'SEO', 'Structured Data', 'JSON-LD'],
+			articleSection: 'Web Development',
+		},
+	};
+</script>
+
+<Head {seo_config} />
+<SchemaOrg schema={schema_org} />
+
+<article>
+	<nav aria-label="Breadcrumb">
+		<ol>
+			<li><a href={seo_config.website}>Home</a></li>
+			<li><a href={`${seo_config.website}/blog`}>Blog</a></li>
+			<li>{seo_config.title}</li>
+		</ol>
+	</nav>
+
+	<h1>{seo_config.title}</h1>
+	<p>{seo_config.description}</p>
+
+	<Copy />
+
+	<!-- Rest of your blog post content -->
+	<section>
+		<h2>Introduction to Structured Data</h2>
+		<p>
+			Structured data helps search engines understand the content of
+			your web pages...
+		</p>
+	</section>
+
+	<section>
+		<h2>Implementing JSON-LD in SvelteKit</h2>
+		<p>Here's how you can add JSON-LD to your SvelteKit project...</p>
+	</section>
+
+	<!-- More sections... -->
+
+	<footer>
+		<p>Author: {seo_config.author_name}</p>
+		<p>Published: {new Date().toLocaleDateString()}</p>
+	</footer>
+</article>
+```
diff --git a/apps/web/src/lib/copy/news-article-copy.md b/apps/web/src/lib/copy/news-article-copy.md
new file mode 100644
index 0000000..63f12a0
--- /dev/null
+++ b/apps/web/src/lib/copy/news-article-copy.md
@@ -0,0 +1,127 @@
+Here's the code for this page:
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/stores';
+	import {
+		Head,
+		SchemaOrg,
+		type SchemaOrgProps,
+		type SeoConfig,
+	} from 'svead';
+
+	export let data;
+	let { Copy } = data;
+
+	const seo_config: SeoConfig = {
+		url: $page.url.href,
+		website: 'https://example.com',
+		title: 'Breaking News: Major Event Unfolds',
+		description:
+			'A significant event has taken place, impacting the lives of many. Read our latest news article for detailed coverage and analysis.',
+		open_graph_image:
+			'https://example.com/images/breaking-news-image.jpg',
+		author_name: 'Jane Smith',
+		language: 'en',
+		twitter_handle: '@examplenews',
+		site_name: 'Example News',
+	};
+
+	const schema_org: SchemaOrgProps['schema'] = {
+		'@type': 'WebPage',
+		'@id': $page.url.href,
+		url: $page.url.href,
+		name: seo_config.title,
+		description: seo_config.description,
+		inLanguage: seo_config.language,
+		isPartOf: {
+			'@type': 'WebSite',
+			'@id': seo_config.website,
+		},
+		primaryImageOfPage: {
+			'@type': 'ImageObject',
+			url: seo_config.open_graph_image,
+		},
+		datePublished: '2023-06-02T09:30:00Z',
+		dateModified: '2023-06-02T11:45:00Z',
+		author: {
+			'@type': 'Person',
+			name: seo_config.author_name,
+			url: `${seo_config.website}/author/jane-smith`,
+		},
+		publisher: {
+			'@type': 'Organization',
+			name: seo_config.site_name,
+			url: seo_config.website,
+			logo: {
+				'@type': 'ImageObject',
+				url: `${seo_config.website}/logo.png`,
+			},
+		},
+		breadcrumb: {
+			'@type': 'BreadcrumbList',
+			'@id': `${$page.url.href}#breadcrumb`,
+			name: 'Breadcrumb',
+			itemListElement: [
+				{
+					'@type': 'ListItem',
+					position: 1,
+					name: 'Home',
+					item: seo_config.website,
+				},
+				{
+					'@type': 'ListItem',
+					position: 2,
+					name: 'News',
+					item: `${seo_config.website}/news`,
+				},
+				{
+					'@type': 'ListItem',
+					position: 3,
+					name: seo_config.title,
+					item: $page.url.href,
+				},
+			],
+		},
+		mainEntity: {
+			'@type': 'NewsArticle',
+			'@id': `${$page.url.href}#article`,
+			headline: seo_config.title,
+			description: seo_config.description,
+			image: seo_config.open_graph_image,
+			datePublished: '2023-06-02T09:30:00Z',
+			dateModified: '2023-06-02T11:45:00Z',
+			author: {
+				'@type': 'Person',
+				name: seo_config.author_name,
+				url: `${seo_config.website}/author/jane-smith`,
+			},
+			publisher: {
+				'@type': 'Organization',
+				name: seo_config.site_name,
+				url: seo_config.website,
+				logo: {
+					'@type': 'ImageObject',
+					url: `${seo_config.website}/logo.png`,
+				},
+			},
+			mainEntityOfPage: {
+				'@type': 'WebPage',
+				'@id': $page.url.href,
+			},
+			articleSection: ['News', 'Breaking News'],
+			inLanguage: seo_config.language,
+		},
+	};
+</script>
+
+<Head {seo_config} />
+<SchemaOrg schema={schema_org} />
+
+<article>
+	<h1>{seo_config.title}</h1>
+	<p>{seo_config.description}</p>
+	<!-- Rest of your article content -->
+	<Copy />
+</article>
+```
diff --git a/apps/web/src/lib/copy/web-page-copy.md b/apps/web/src/lib/copy/web-page-copy.md
new file mode 100644
index 0000000..974bd03
--- /dev/null
+++ b/apps/web/src/lib/copy/web-page-copy.md
@@ -0,0 +1,96 @@
+Here's the code for this page:
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/stores';
+	import {
+		Head,
+		SchemaOrg,
+		type SchemaOrgProps,
+		type SeoConfig,
+	} from 'svead';
+
+	export let data;
+	let { Copy } = data;
+
+	const seo_config: SeoConfig = {
+		url: $page.url.href,
+		website: 'https://example.com',
+		title: 'Sample Web Page',
+		description:
+			'This is an example of a simple web page showcasing the usage of the svead package for SEO optimization.',
+		open_graph_image: 'https://example.com/images/web-page-image.jpg',
+		language: 'en',
+		twitter_handle: '@example',
+		site_name: 'Example Site',
+	};
+
+	const schema_org: SchemaOrgProps['schema'] = {
+		'@type': 'WebPage',
+		'@id': $page.url.href,
+		url: $page.url.href,
+		name: seo_config.title,
+		description: seo_config.description,
+		inLanguage: seo_config.language,
+		isPartOf: {
+			'@type': 'WebSite',
+			'@id': seo_config.website,
+		},
+		primaryImageOfPage: {
+			'@type': 'ImageObject',
+			url: seo_config.open_graph_image,
+		},
+		datePublished: '2023-06-03T09:00:00Z',
+		dateModified: '2023-06-03T11:30:00Z',
+		author: {
+			'@type': 'Person',
+			name: 'John Doe',
+			url: `${seo_config.website}/author/john-doe`,
+		},
+		publisher: {
+			'@type': 'Organization',
+			name: seo_config.site_name,
+			url: seo_config.website,
+			logo: {
+				'@type': 'ImageObject',
+				url: `${seo_config.website}/logo.png`,
+			},
+		},
+		breadcrumb: {
+			'@type': 'BreadcrumbList',
+			'@id': `${$page.url.href}#breadcrumb`,
+			name: 'Breadcrumb',
+			itemListElement: [
+				{
+					'@type': 'ListItem',
+					position: 1,
+					name: 'Home',
+					item: seo_config.website,
+				},
+				{
+					'@type': 'ListItem',
+					position: 2,
+					name: seo_config.title,
+					item: $page.url.href,
+				},
+			],
+		},
+		potentialAction: [
+			{
+				'@type': 'ReadAction',
+				target: $page.url.href,
+			},
+		],
+	};
+</script>
+
+<Head {seo_config} />
+<SchemaOrg schema={schema_org} />
+
+<main>
+	<h1>{seo_config.title}</h1>
+	<p>{seo_config.description}</p>
+	<!-- Rest of your page content -->
+	<Copy />
+</main>
+```
diff --git a/apps/web/src/routes/blog-posting/+page.svelte b/apps/web/src/routes/blog-posting/+page.svelte
index c544e89..a90b320 100644
--- a/apps/web/src/routes/blog-posting/+page.svelte
+++ b/apps/web/src/routes/blog-posting/+page.svelte
@@ -7,6 +7,9 @@
 		type SeoConfig,
 	} from 'svead';
 
+	export let data;
+	let { Copy } = data;
+
 	const get_current_iso_date = () => new Date().toISOString();
 
 	const seo_config: SeoConfig = {
@@ -101,4 +104,5 @@
 	<h1>{seo_config.title}</h1>
 	<p>{seo_config.description}</p>
 	<!-- Rest of your blog post content -->
+	<Copy />
 </article>
diff --git a/apps/web/src/routes/blog-posting/+page.ts b/apps/web/src/routes/blog-posting/+page.ts
new file mode 100644
index 0000000..4e7e603
--- /dev/null
+++ b/apps/web/src/routes/blog-posting/+page.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async () => {
+	const slug = 'blog-posting-copy';
+	try {
+		const Copy = await import(`../../lib/copy/${slug}.md`);
+		return {
+			Copy: Copy.default,
+		};
+	} catch (e) {
+		throw error(404, 'Uh oh!');
+	}
+};
diff --git a/apps/web/src/routes/breadcrumbs/+page.svelte b/apps/web/src/routes/breadcrumbs/+page.svelte
index 35b19b9..cb1c16a 100644
--- a/apps/web/src/routes/breadcrumbs/+page.svelte
+++ b/apps/web/src/routes/breadcrumbs/+page.svelte
@@ -3,8 +3,11 @@
 	import type { SchemaOrgProps, SeoConfig } from 'svead';
 	import { Head, SchemaOrg } from 'svead';
 
+	export let data;
+	let { Copy } = data;
+
 	// Example data for the webpage
-	const page_title = 'Sample Web Page';
+	const page_title = 'Sample Breadcrumbs Example';
 	const page_description =
 		'This is an example of a web page with enhanced SEO features.';
 
@@ -108,3 +111,5 @@
 
 <h1>{page_title}</h1>
 <p>{page_description}</p>
+
+<Copy />
diff --git a/apps/web/src/routes/breadcrumbs/+page.ts b/apps/web/src/routes/breadcrumbs/+page.ts
new file mode 100644
index 0000000..7801cea
--- /dev/null
+++ b/apps/web/src/routes/breadcrumbs/+page.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async () => {
+	const slug = 'breadcrumbs-copy';
+	try {
+		const Copy = await import(`../../lib/copy/${slug}.md`);
+		return {
+			Copy: Copy.default,
+		};
+	} catch (e) {
+		throw error(404, 'Uh oh!');
+	}
+};
diff --git a/apps/web/src/routes/multiple-ld-json-sections/+page.svelte b/apps/web/src/routes/multiple-ld-json-sections/+page.svelte
index f39828d..1c04476 100644
--- a/apps/web/src/routes/multiple-ld-json-sections/+page.svelte
+++ b/apps/web/src/routes/multiple-ld-json-sections/+page.svelte
@@ -7,6 +7,9 @@
 		type SeoConfig,
 	} from 'svead';
 
+	export let data;
+	let { Copy } = data;
+
 	const get_current_iso_date = () => new Date().toISOString();
 
 	const seo_config: SeoConfig = {
@@ -130,6 +133,8 @@
 	<h1>{seo_config.title}</h1>
 	<p>{seo_config.description}</p>
 
+	<Copy />
+
 	<!-- Rest of your blog post content -->
 	<section>
 		<h2>Introduction to Structured Data</h2>
diff --git a/apps/web/src/routes/multiple-ld-json-sections/+page.ts b/apps/web/src/routes/multiple-ld-json-sections/+page.ts
new file mode 100644
index 0000000..11f4d82
--- /dev/null
+++ b/apps/web/src/routes/multiple-ld-json-sections/+page.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async () => {
+	const slug = 'multiple-ld-json-sections-copy';
+	try {
+		const Copy = await import(`../../lib/copy/${slug}.md`);
+		return {
+			Copy: Copy.default,
+		};
+	} catch (e) {
+		throw error(404, 'Uh oh!');
+	}
+};
diff --git a/apps/web/src/routes/news-article/+page.svelte b/apps/web/src/routes/news-article/+page.svelte
index 7b42020..ef1670a 100644
--- a/apps/web/src/routes/news-article/+page.svelte
+++ b/apps/web/src/routes/news-article/+page.svelte
@@ -7,6 +7,9 @@
 		type SeoConfig,
 	} from 'svead';
 
+	export let data;
+	let { Copy } = data;
+
 	const seo_config: SeoConfig = {
 		url: $page.url.href,
 		website: 'https://example.com',
@@ -116,4 +119,5 @@
 	<h1>{seo_config.title}</h1>
 	<p>{seo_config.description}</p>
 	<!-- Rest of your article content -->
+	<Copy />
 </article>
diff --git a/apps/web/src/routes/news-article/+page.ts b/apps/web/src/routes/news-article/+page.ts
new file mode 100644
index 0000000..e041ae6
--- /dev/null
+++ b/apps/web/src/routes/news-article/+page.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async () => {
+	const slug = 'news-article-copy';
+	try {
+		const Copy = await import(`../../lib/copy/${slug}.md`);
+		return {
+			Copy: Copy.default,
+		};
+	} catch (e) {
+		throw error(404, 'Uh oh!');
+	}
+};
diff --git a/apps/web/src/routes/web-page/+page.svelte b/apps/web/src/routes/web-page/+page.svelte
index d7be1ed..566d716 100644
--- a/apps/web/src/routes/web-page/+page.svelte
+++ b/apps/web/src/routes/web-page/+page.svelte
@@ -7,6 +7,9 @@
 		type SeoConfig,
 	} from 'svead';
 
+	export let data;
+	let { Copy } = data;
+
 	const seo_config: SeoConfig = {
 		url: $page.url.href,
 		website: 'https://example.com',
@@ -85,4 +88,5 @@
 	<h1>{seo_config.title}</h1>
 	<p>{seo_config.description}</p>
 	<!-- Rest of your page content -->
+	<Copy />
 </main>
diff --git a/apps/web/src/routes/web-page/+page.ts b/apps/web/src/routes/web-page/+page.ts
new file mode 100644
index 0000000..2c49e36
--- /dev/null
+++ b/apps/web/src/routes/web-page/+page.ts
@@ -0,0 +1,13 @@
+import { error } from '@sveltejs/kit';
+
+export const load = async () => {
+	const slug = 'web-page-copy';
+	try {
+		const Copy = await import(`../../lib/copy/${slug}.md`);
+		return {
+			Copy: Copy.default,
+		};
+	} catch (e) {
+		throw error(404, 'Uh oh!');
+	}
+};