docs: 📝 add in example code to docs

spences10 · Aug 22, 2024 · 947943b · 947943b
1 parent 755e553
commit 947943b
Show file tree

Hide file tree

Showing 16 changed files with 715 additions and 1 deletion.
diff --git a/apps/web/src/lib/copy/blog-posting-copy.md 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
@@ -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
@@ -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