-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.svelte
56 lines (49 loc) · 1.27 KB
/
index.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
<script lang="ts">
import type {
CustomBlockComponents,
CustomSpanComponents,
StandardComponentOverrides,
} from '$lib/index';
import Blink from './_blink.svelte';
import Blockquote from './_blockquote.svelte';
import Code from './_code.svelte';
import Heading from './_heading.svelte';
import Li from './_li.svelte';
import Link from './_link.svelte';
import Ol from './_ol.svelte';
import { PortableText } from '$lib/index';
import Rainbow from './_rainbow.svelte';
import SignupForm from './_signup-form.svelte';
import Ul from './_ul.svelte';
import exampleBlocks from '../_example.json';
const components: StandardComponentOverrides = {
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
code: Code,
link: Link,
blockquote: Blockquote,
ol: Ol,
ul: Ul,
li: Li,
};
const customSpanComponents: CustomSpanComponents = {
rainbow: Rainbow,
blink: Blink,
};
const customBlockComponents: CustomBlockComponents = {
signup: SignupForm,
};
</script>
<h2>Custom rendering example</h2>
<p>Example of customizing all the components for rendering.</p>
<hr />
<PortableText
blocks={exampleBlocks}
{components}
{customSpanComponents}
{customBlockComponents}
/>