-
Notifications
You must be signed in to change notification settings - Fork 0
/
OGP.svelte
106 lines (86 loc) · 2.7 KB
/
OGP.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script lang="ts">
import { page } from '$app/stores'
import { SvelteHTML } from '@jill64/svelte-html'
import { store } from './store'
import { serialize } from './utils/serialize'
// https://ogp.me
export let prefix = 'og: https://ogp.me/ns#'
// https://ogp.me/#metadata
/** The title of your object as it should appear within the graph */
export let title: string
/**
* The type of your object.
* Depending on the type you specify, other properties may also be required.
* @see https://ogp.me/#types
* @default 'website'
*/
export let type = 'website'
/** An image URL which should represent your object within the graph. */
export let image: string
/**
* The canonical URL of your object that will be used as its permanent ID in the graph.
* @default $page.url.href
*/
export let url: string | undefined = undefined
// https://ogp.me/#optional
/** A one to two sentence description of your object. */
export let description: string
/** If your object is part of a larger web site, the name which should be displayed for the overall site. */
export let site_name: string
// Twitter Cards
// https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
/**
* The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.
* @default 'summary_large_image'
*/
export let twitter_card:
| 'summary'
| 'summary_large_image'
| 'app'
| 'player' = 'summary_large_image'
/** "@username" for the website used in the card footer. */
export let twitter_site: `@${string}` | undefined = undefined
/** "@username" for the content creator / author. */
export let twitter_creator: `@${string}` | undefined = undefined
/** Custom properties */
export let custom_properties: {
og?: Record<string, string>
} & Record<string, string> = {}
/** Custom names */
export let custom_names: {
twitter?: Record<string, string>
} & Record<string, string> = {}
$: $store = {
prefix
}
$: properties = {
...custom_properties,
og: {
title,
type,
image: (image.startsWith('/') ? $page.url.origin : '') + image,
url: url || $page.url.href,
description,
site_name,
...custom_properties.og
}
}
$: names = {
...custom_names,
twitter: {
card: twitter_card,
site: twitter_site,
creator: twitter_creator,
...custom_names.twitter
}
}
</script>
<SvelteHTML {prefix} />
<svelte:head>
{#each serialize(properties) as [property, content]}
<meta {property} {content} />
{/each}
{#each serialize(names) as [name, content]}
<meta {name} {content} />
{/each}
</svelte:head>