Skip to content

Commit 947943b

Browse files
spences10spences10
committed
docs: 📝 add in example code to docs
1 parent 755e553 commit 947943b

File tree

16 files changed

+715
-1
lines changed

16 files changed

+715
-1
lines changed

‎apps/web/src/lib/copy/blog-posting-copy.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
Here's the code for this page:
2+
3+
```svelte
4+
<script lang="ts">
5+
import { page } from '$app/stores';
6+
import {
7+
Head,
8+
SchemaOrg,
9+
type SchemaOrgProps,
10+
type SeoConfig,
11+
} from 'svead';
12+
13+
export let data;
14+
let { Copy } = data;
15+
16+
const get_current_iso_date = () => new Date().toISOString();
17+
18+
const seo_config: SeoConfig = {
19+
url: $page.url.href,
20+
website: 'https://example.com',
21+
title: 'My Blog Post',
22+
description:
23+
'This is an example blog post showcasing the usage of the svead package.',
24+
open_graph_image:
25+
'https://example.com/images/blog-post-image.jpg',
26+
author_name: 'John Doe',
27+
language: 'en',
28+
twitter_handle: '@johndoe',
29+
site_name: 'Example Blog',
30+
};
31+
32+
const schema_org: SchemaOrgProps['schema'] = {
33+
'@type': 'WebPage',
34+
'@id': $page.url.href,
35+
url: $page.url.href,
36+
name: seo_config.title,
37+
description: seo_config.description,
38+
inLanguage: seo_config.language,
39+
...(seo_config.website && {
40+
isPartOf: {
41+
'@type': 'WebSite',
42+
'@id': seo_config.website,
43+
},
44+
}),
45+
...(seo_config.open_graph_image && {
46+
primaryImageOfPage: {
47+
'@type': 'ImageObject',
48+
url: seo_config.open_graph_image,
49+
},
50+
}),
51+
datePublished: get_current_iso_date(),
52+
dateModified: get_current_iso_date(),
53+
author: {
54+
'@type': 'Person',
55+
name: seo_config.author_name,
56+
...(seo_config.website && {
57+
url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
58+
}),
59+
},
60+
potentialAction: [
61+
{
62+
'@type': 'ReadAction',
63+
target: $page.url.href,
64+
},
65+
],
66+
mainEntity: {
67+
'@type': 'BlogPosting',
68+
'@id': `${$page.url.href}#article`,
69+
headline: seo_config.title,
70+
description: seo_config.description,
71+
...(seo_config.open_graph_image && {
72+
image: seo_config.open_graph_image,
73+
}),
74+
datePublished: get_current_iso_date(),
75+
dateModified: get_current_iso_date(),
76+
author: {
77+
'@type': 'Person',
78+
name: seo_config.author_name,
79+
...(seo_config.website && {
80+
url: `${seo_config.website}/author/${seo_config.author_name?.toLowerCase().replace(' ', '-')}`,
81+
}),
82+
},
83+
publisher: {
84+
'@type': 'Organization',
85+
name: seo_config.site_name,
86+
...(seo_config.website && { url: seo_config.website }),
87+
...(seo_config.website && {
88+
logo: {
89+
'@type': 'ImageObject',
90+
url: `${seo_config.website}/logo.png`,
91+
},
92+
}),
93+
},
94+
mainEntityOfPage: {
95+
'@type': 'WebPage',
96+
'@id': $page.url.href,
97+
},
98+
inLanguage: seo_config.language,
99+
},
100+
};
101+
</script>
102+
103+
<Head {seo_config} />
104+
<SchemaOrg schema={schema_org} />
105+
106+
<article>
107+
<h1>{seo_config.title}</h1>
108+
<p>{seo_config.description}</p>
109+
<!-- Rest of your blog post content -->
110+
<Copy />
111+
</article>
112+
```

‎apps/web/src/lib/copy/breadcrumbs-copy.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
Here's the code for this page:
2+
3+
```svelte
4+
<script lang="ts">
5+
import { page } from '$app/stores';
6+
import type { SchemaOrgProps, SeoConfig } from 'svead';
7+
import { Head, SchemaOrg } from 'svead';
8+
9+
export let data;
10+
let { Copy } = data;
11+
12+
// Example data for the webpage
13+
const page_title = 'Sample Web Page';
14+
const page_description =
15+
'This is an example of a web page with enhanced SEO features.';
16+
17+
const seo_config: SeoConfig = {
18+
title: 'Example Page Title',
19+
description: 'This is an example description of the web page.',
20+
url: $page.url.href,
21+
website: 'https://www.example.com',
22+
open_graph_image: 'https://www.example.com/og-image.jpg',
23+
language: 'en',
24+
author_name: 'Author Name',
25+
twitter_handle: '@example',
26+
site_name: 'Example Site',
27+
};
28+
29+
// Function to get current date in ISO format
30+
const get_current_iso_date = () => new Date().toISOString();
31+
32+
const schema_org: SchemaOrgProps['schema'] = {
33+
'@type': 'WebPage',
34+
'@id': $page.url.href,
35+
url: $page.url.href,
36+
name: 'Example Page Title',
37+
description: 'This is an example description of the web page.',
38+
inLanguage: 'en',
39+
isPartOf: {
40+
'@id': 'https://www.example.com',
41+
},
42+
breadcrumb: {
43+
'@type': 'BreadcrumbList',
44+
'@id': `${$page.url.href}#breadcrumb`,
45+
name: 'Breadcrumb',
46+
itemListElement: [
47+
{
48+
'@type': 'ListItem',
49+
position: 1,
50+
name: 'Home',
51+
item: 'https://www.example.com',
52+
},
53+
{
54+
'@type': 'ListItem',
55+
position: 2,
56+
name: 'Category',
57+
item: 'https://www.example.com/category',
58+
},
59+
{
60+
'@type': 'ListItem',
61+
position: 3,
62+
name: 'Example Page Title',
63+
item: $page.url.href,
64+
},
65+
],
66+
},
67+
primaryImageOfPage: {
68+
'@type': 'ImageObject',
69+
url: 'https://www.example.com/og-image.jpg',
70+
},
71+
datePublished: get_current_iso_date(),
72+
dateModified: get_current_iso_date(),
73+
author: {
74+
'@type': 'Person',
75+
name: 'Author Name',
76+
url: 'https://www.example.com/author',
77+
},
78+
potentialAction: [
79+
{
80+
'@type': 'ReadAction',
81+
target: $page.url.href,
82+
},
83+
],
84+
mainEntity: {
85+
'@type': 'Article',
86+
'@id': `${$page.url.href}#article`,
87+
isPartOf: {
88+
'@id': 'https://www.example.com',
89+
},
90+
author: {
91+
'@type': 'Person',
92+
name: 'Author Name',
93+
url: 'https://www.example.com/author',
94+
},
95+
headline: 'Example Article Headline',
96+
datePublished: get_current_iso_date(),
97+
dateModified: get_current_iso_date(),
98+
publisher: {
99+
'@type': 'Organization',
100+
name: 'Publisher Name',
101+
url: 'https://www.example.com/publisher',
102+
},
103+
image: {
104+
'@type': 'ImageObject',
105+
url: 'https://www.example.com/og-image.jpg',
106+
},
107+
articleSection: ['News', 'Technology'],
108+
},
109+
};
110+
</script>
111+
112+
<Head {seo_config} />
113+
<SchemaOrg schema={schema_org} />
114+
115+
<h1>{page_title}</h1>
116+
<p>{page_description}</p>
117+
118+
<Copy />
119+
```

‎apps/web/src/lib/copy/index-copy.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ Svead provides two main components:
2020
1. `Head`: For setting meta tags and other head information.
2121
2. `SchemaOrg`: For adding structured data using JSON-LD.
2222

23+
## Example Routes
24+
25+
Explore how Svead works with different content types:
26+
27+
- [Breadcrumbs](/breadcrumbs)
28+
- [Article](/article)
29+
- [Blog Posting](/blog-posting)
30+
- [News Article](/news-article)
31+
- [Web Page](/web-page)
32+
- [Multiple JSON-LD Sections](/multiple-ld-json-sections)
33+
2334
## Head Component
2435

2536
### Usage

0 commit comments

Comments
 (0)