|
40 | 40 | </template> |
41 | 41 |
|
42 | 42 | <script setup lang="ts"> |
43 | | -// import type { NotionBlock } from "../src/runtime/types/notion-blocks"; |
| 43 | +import type { NotionBlock } from '../src/runtime/types/notion-blocks' |
44 | 44 |
|
45 | 45 | // Sample blocks for demonstration |
46 | | -// const sampleBlocks: NotionBlock[] = [ |
47 | | -// { |
48 | | -// object: "block", |
49 | | -// id: "1", |
50 | | -// parent: { type: "page_id", page_id: "test" }, |
51 | | -// created_time: "2024-01-01T00:00:00.000Z", |
52 | | -// last_edited_time: "2024-01-01T00:00:00.000Z", |
53 | | -// created_by: { object: "user", id: "user1" }, |
54 | | -// last_edited_by: { object: "user", id: "user1" }, |
55 | | -// has_children: false, |
56 | | -// archived: false, |
57 | | -// in_trash: false, |
58 | | -// type: "heading_1", |
59 | | -// heading_1: { |
60 | | -// rich_text: [ |
61 | | -// { |
62 | | -// type: "text", |
63 | | -// text: { content: "Welcome to Notion Renderer!" }, |
64 | | -// plain_text: "Welcome to Notion Renderer!", |
65 | | -// }, |
66 | | -// ], |
67 | | -// }, |
68 | | -// }, |
69 | | -// { |
70 | | -// object: "block", |
71 | | -// id: "2", |
72 | | -// parent: { type: "page_id", page_id: "test" }, |
73 | | -// created_time: "2024-01-01T00:00:00.000Z", |
74 | | -// last_edited_time: "2024-01-01T00:00:00.000Z", |
75 | | -// created_by: { object: "user", id: "user1" }, |
76 | | -// last_edited_by: { object: "user", id: "user1" }, |
77 | | -// has_children: false, |
78 | | -// archived: false, |
79 | | -// in_trash: false, |
80 | | -// type: "paragraph", |
81 | | -// paragraph: { |
82 | | -// rich_text: [ |
83 | | -// { |
84 | | -// type: "text", |
85 | | -// text: { |
86 | | -// content: |
87 | | -// "This is a sample paragraph showing how the Notion renderer works. It supports ", |
88 | | -// }, |
89 | | -// plain_text: |
90 | | -// "This is a sample paragraph showing how the Notion renderer works. It supports ", |
91 | | -// }, |
92 | | -// { |
93 | | -// type: "text", |
94 | | -// text: { content: "rich text formatting" }, |
95 | | -// annotations: { bold: true }, |
96 | | -// plain_text: "rich text formatting", |
97 | | -// }, |
98 | | -// { |
99 | | -// type: "text", |
100 | | -// text: { content: " like bold text." }, |
101 | | -// plain_text: " like bold text.", |
102 | | -// }, |
103 | | -// ], |
104 | | -// }, |
105 | | -// }, |
106 | | -// ]; |
| 46 | +const sampleBlocks: NotionBlock[] = [ |
| 47 | + { |
| 48 | + object: 'block', |
| 49 | + id: '1', |
| 50 | + parent: { type: 'page_id', page_id: 'test' }, |
| 51 | + created_time: '2024-01-01T00:00:00.000Z', |
| 52 | + last_edited_time: '2024-01-01T00:00:00.000Z', |
| 53 | + created_by: { object: 'user', id: 'user1' }, |
| 54 | + last_edited_by: { object: 'user', id: 'user1' }, |
| 55 | + has_children: false, |
| 56 | + archived: false, |
| 57 | + in_trash: false, |
| 58 | + type: 'heading_1', |
| 59 | + heading_1: { |
| 60 | + rich_text: [ |
| 61 | + { |
| 62 | + type: 'text', |
| 63 | + text: { content: 'Welcome to Notion Renderer!' }, |
| 64 | + plain_text: 'Welcome to Notion Renderer!', |
| 65 | + }, |
| 66 | + ], |
| 67 | + }, |
| 68 | + }, |
| 69 | + { |
| 70 | + object: 'block', |
| 71 | + id: '2', |
| 72 | + parent: { type: 'page_id', page_id: 'test' }, |
| 73 | + created_time: '2024-01-01T00:00:00.000Z', |
| 74 | + last_edited_time: '2024-01-01T00:00:00.000Z', |
| 75 | + created_by: { object: 'user', id: 'user1' }, |
| 76 | + last_edited_by: { object: 'user', id: 'user1' }, |
| 77 | + has_children: false, |
| 78 | + archived: false, |
| 79 | + in_trash: false, |
| 80 | + type: 'paragraph', |
| 81 | + paragraph: { |
| 82 | + rich_text: [ |
| 83 | + { |
| 84 | + type: 'text', |
| 85 | + text: { |
| 86 | + content: |
| 87 | + 'This is a sample paragraph showing how the Notion renderer works. It supports ', |
| 88 | + }, |
| 89 | + plain_text: |
| 90 | + 'This is a sample paragraph showing how the Notion renderer works. It supports ', |
| 91 | + }, |
| 92 | + { |
| 93 | + type: 'text', |
| 94 | + text: { content: 'rich text formatting' }, |
| 95 | + annotations: { bold: true }, |
| 96 | + plain_text: 'rich text formatting', |
| 97 | + }, |
| 98 | + { |
| 99 | + type: 'text', |
| 100 | + text: { content: ' like bold text.' }, |
| 101 | + plain_text: ' like bold text.', |
| 102 | + }, |
| 103 | + ], |
| 104 | + }, |
| 105 | + }, |
| 106 | +] |
107 | 107 |
|
108 | 108 | // Individual component examples |
109 | | -// const paragraphBlock: NotionBlock = sampleBlocks[1]! |
| 109 | +const paragraphBlock: NotionBlock = sampleBlocks[1]! |
110 | 110 |
|
111 | | -// const headingBlock: NotionBlock = { |
112 | | -// object: 'block', |
113 | | -// id: '3', |
114 | | -// parent: { type: 'page_id', page_id: 'test' }, |
115 | | -// created_time: '2024-01-01T00:00:00.000Z', |
116 | | -// last_edited_time: '2024-01-01T00:00:00.000Z', |
117 | | -// created_by: { object: 'user', id: 'user1' }, |
118 | | -// last_edited_by: { object: 'user', id: 'user1' }, |
119 | | -// has_children: false, |
120 | | -// archived: false, |
121 | | -// in_trash: false, |
122 | | -// type: 'heading_2', |
123 | | -// heading_2: { |
124 | | -// rich_text: [ |
125 | | -// { |
126 | | -// type: 'text', |
127 | | -// text: { content: 'This is a Heading 2' }, |
128 | | -// plain_text: 'This is a Heading 2', |
129 | | -// }, |
130 | | -// ], |
131 | | -// }, |
132 | | -// } |
| 111 | +const headingBlock: NotionBlock = { |
| 112 | + object: 'block', |
| 113 | + id: '3', |
| 114 | + parent: { type: 'page_id', page_id: 'test' }, |
| 115 | + created_time: '2024-01-01T00:00:00.000Z', |
| 116 | + last_edited_time: '2024-01-01T00:00:00.000Z', |
| 117 | + created_by: { object: 'user', id: 'user1' }, |
| 118 | + last_edited_by: { object: 'user', id: 'user1' }, |
| 119 | + has_children: false, |
| 120 | + archived: false, |
| 121 | + in_trash: false, |
| 122 | + type: 'heading_2', |
| 123 | + heading_2: { |
| 124 | + rich_text: [ |
| 125 | + { |
| 126 | + type: 'text', |
| 127 | + text: { content: 'This is a Heading 2' }, |
| 128 | + plain_text: 'This is a Heading 2', |
| 129 | + }, |
| 130 | + ], |
| 131 | + }, |
| 132 | +} |
133 | 133 |
|
134 | | -// const quoteBlock: NotionBlock = { |
135 | | -// object: 'block', |
136 | | -// id: '4', |
137 | | -// parent: { type: 'page_id', page_id: 'test' }, |
138 | | -// created_time: '2024-01-01T00:00:00.000Z', |
139 | | -// last_edited_time: '2024-01-01T00:00:00.000Z', |
140 | | -// created_by: { object: 'user', id: 'user1' }, |
141 | | -// last_edited_by: { object: 'user', id: 'user1' }, |
142 | | -// has_children: false, |
143 | | -// archived: false, |
144 | | -// in_trash: false, |
145 | | -// type: 'quote', |
146 | | -// quote: { |
147 | | -// rich_text: [ |
148 | | -// { |
149 | | -// type: 'text', |
150 | | -// text: { |
151 | | -// content: |
152 | | -// 'This is an inspiring quote block that demonstrates the quote styling.', |
153 | | -// }, |
154 | | -// plain_text: |
155 | | -// 'This is an inspiring quote block that demonstrates the quote styling.', |
156 | | -// }, |
157 | | -// ], |
158 | | -// }, |
159 | | -// } |
| 134 | +const quoteBlock: NotionBlock = { |
| 135 | + object: 'block', |
| 136 | + id: '4', |
| 137 | + parent: { type: 'page_id', page_id: 'test' }, |
| 138 | + created_time: '2024-01-01T00:00:00.000Z', |
| 139 | + last_edited_time: '2024-01-01T00:00:00.000Z', |
| 140 | + created_by: { object: 'user', id: 'user1' }, |
| 141 | + last_edited_by: { object: 'user', id: 'user1' }, |
| 142 | + has_children: false, |
| 143 | + archived: false, |
| 144 | + in_trash: false, |
| 145 | + type: 'quote', |
| 146 | + quote: { |
| 147 | + rich_text: [ |
| 148 | + { |
| 149 | + type: 'text', |
| 150 | + text: { |
| 151 | + content: |
| 152 | + 'This is an inspiring quote block that demonstrates the quote styling.', |
| 153 | + }, |
| 154 | + plain_text: |
| 155 | + 'This is an inspiring quote block that demonstrates the quote styling.', |
| 156 | + }, |
| 157 | + ], |
| 158 | + }, |
| 159 | +} |
160 | 160 |
|
161 | 161 | const complexBlocks = [ |
162 | 162 | { |
|
0 commit comments