chalknotes 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/templates/components.d.ts.map +1 -1
  2. package/dist/templates/components.js +148 -15
  3. package/dist/templates/components.js.map +1 -1
  4. package/package.json +1 -1
package/dist/templates/components.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/templates/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAEtE;AAmdD,wBAAgB,kBAAkB,IAAI,MAAM,CAsI3C"}
1
+ {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/templates/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAEtE;AAwlBD,wBAAgB,kBAAkB,IAAI,MAAM,CAsI3C"}
package/dist/templates/components.js CHANGED
@@ -8,7 +8,9 @@ function generateNotionRenderer(vars) {
8
8
  function generateAppRouterRenderer(vars) {
9
9
  const imageImport = 'import Image from "next/image";';
10
10
  if (vars.hasTailwind) {
11
- return `${vars.hasTypeScript ? 'import React from "react";' : 'import React from "react";'}
11
+ return `"use client";
12
+
13
+ ${vars.hasTypeScript ? 'import React from "react";' : 'import React from "react";'}
12
14
  ${imageImport}
13
15
 
14
16
  interface NotionBlock {
@@ -21,6 +23,13 @@ interface NotionBlock {
21
23
  code?: string;
22
24
  language?: string;
23
25
  unsupported?: boolean;
26
+ // Table properties
27
+ tableWidth?: number;
28
+ hasColumnHeader?: boolean;
29
+ hasRowHeader?: boolean;
30
+ rows?: {
31
+ cells: string[][];
32
+ }[];
24
33
  }
25
34
 
26
35
  interface NotionRendererProps {
@@ -75,19 +84,19 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
75
84
 
76
85
  case "paragraph":
77
86
  return (
78
- <p key={i} className="leading-relaxed mb-4 text-gray-700 dark:text-gray-300">
79
- {block.text && (block.text.includes('tweet-embed') || block.text.includes('youtube-embed')) ? (
87
+ <div key={i} className="leading-relaxed mb-4 text-gray-700 dark:text-gray-300">
88
+ {block.text && (block.text.includes('tweet-embed') || block.text.includes('youtube-embed') || block.text.includes('reading-time') || block.text.includes('table-of-contents') || block.text.includes('share-section') || block.text.includes('comment-section') || block.text.includes('image-gallery')) ? (
80
89
  isClient ? (
81
- <span className="flex w-full justify-center" dangerouslySetInnerHTML={{ __html: block.text }} />
90
+ <div className="flex w-full justify-center" dangerouslySetInnerHTML={{ __html: block.text }} />
82
91
  ) : (
83
- <div className="embed-placeholder">Loading embed...</div>
92
+ <div className="embed-placeholder">Loading content...</div>
84
93
  )
85
94
  ) : block.text && block.text.includes('<') ? (
86
95
  <span dangerouslySetInnerHTML={{ __html: block.text }} />
87
96
  ) : (
88
- block.text
97
+ <p>{block.text}</p>
89
98
  )}
90
- </p>
99
+ </div>
91
100
  );
92
101
 
93
102
  case "bulleted_list_item":
@@ -182,7 +191,9 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
182
191
  }
183
192
  // CSS Modules version
184
193
  if (vars.cssFramework === 'css-modules') {
185
- return `${vars.hasTypeScript ? 'import React from "react";' : ''}
194
+ return `"use client";
195
+
196
+ ${vars.hasTypeScript ? 'import React from "react";' : 'import React from "react";'}
186
197
  ${imageImport}
187
198
  import styles from './NotionRenderer.module.css';
188
199
 
@@ -196,6 +207,13 @@ interface NotionBlock {
196
207
  code?: string;
197
208
  language?: string;
198
209
  unsupported?: boolean;
210
+ // Table properties
211
+ tableWidth?: number;
212
+ hasColumnHeader?: boolean;
213
+ hasRowHeader?: boolean;
214
+ rows?: {
215
+ cells: string[][];
216
+ }[];
199
217
  }
200
218
 
201
219
  interface NotionRendererProps {
@@ -203,6 +221,24 @@ interface NotionRendererProps {
203
221
  }
204
222
 
205
223
  export default function NotionRenderer({ blocks }: NotionRendererProps) {
224
+ const [isClient, setIsClient] = React.useState(false);
225
+
226
+ React.useEffect(() => {
227
+ setIsClient(true);
228
+
229
+ // Load Twitter widgets script if tweet embeds exist
230
+ if (
231
+ typeof window !== 'undefined' &&
232
+ !(window as typeof window & { twttr?: any }).twttr
233
+ ) {
234
+ const script = document.createElement('script');
235
+ script.src = 'https://platform.twitter.com/widgets.js';
236
+ script.async = true;
237
+ script.charset = 'utf-8';
238
+ document.head.appendChild(script);
239
+ }
240
+ }, []);
241
+
206
242
  if (!blocks || blocks.length === 0) return null;
207
243
 
208
244
  return (
@@ -232,9 +268,19 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
232
268
 
233
269
  case "paragraph":
234
270
  return (
235
- <p key={i} className={styles.paragraph}>
236
- {block.text}
237
- </p>
271
+ <div key={i} className={styles.paragraph}>
272
+ {block.text && (block.text.includes('tweet-embed') || block.text.includes('youtube-embed') || block.text.includes('reading-time') || block.text.includes('table-of-contents') || block.text.includes('share-section') || block.text.includes('comment-section') || block.text.includes('image-gallery')) ? (
273
+ isClient ? (
274
+ <div className={styles.pluginContent} dangerouslySetInnerHTML={{ __html: block.text }} />
275
+ ) : (
276
+ <div className={styles.embedPlaceholder}>Loading content...</div>
277
+ )
278
+ ) : block.text && block.text.includes('<') ? (
279
+ <span dangerouslySetInnerHTML={{ __html: block.text }} />
280
+ ) : (
281
+ <p>{block.text}</p>
282
+ )}
283
+ </div>
238
284
  );
239
285
 
240
286
  case "quote":
@@ -255,6 +301,25 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
255
301
  </pre>
256
302
  );
257
303
 
304
+ case "table":
305
+ return (
306
+ <div key={i} className={styles.tableContainer}>
307
+ <table className={styles.table}>
308
+ <tbody>
309
+ {block.rows?.map((row, rowIndex) => (
310
+ <tr key={rowIndex} className={rowIndex === 0 && block.hasColumnHeader ? styles.tableHeader : ""}>
311
+ {row.cells.map((cell, cellIndex) => (
312
+ <td key={cellIndex} className={styles.tableCell}>
313
+ {cell.join(' ')}
314
+ </td>
315
+ ))}
316
+ </tr>
317
+ ))}
318
+ </tbody>
319
+ </table>
320
+ </div>
321
+ );
322
+
258
323
  case "image":
259
324
  return (
260
325
  <figure key={i}>
@@ -290,7 +355,9 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
290
355
  }`;
291
356
  }
292
357
  // Plain CSS/Styled Components version
293
- return `${vars.hasTypeScript ? 'import React from "react";' : ''}
358
+ return `"use client";
359
+
360
+ ${vars.hasTypeScript ? 'import React from "react";' : 'import React from "react";'}
294
361
  ${imageImport}
295
362
 
296
363
  interface NotionBlock {
@@ -303,6 +370,13 @@ interface NotionBlock {
303
370
  code?: string;
304
371
  language?: string;
305
372
  unsupported?: boolean;
373
+ // Table properties
374
+ tableWidth?: number;
375
+ hasColumnHeader?: boolean;
376
+ hasRowHeader?: boolean;
377
+ rows?: {
378
+ cells: string[][];
379
+ }[];
306
380
  }
307
381
 
308
382
  interface NotionRendererProps {
@@ -310,6 +384,24 @@ interface NotionRendererProps {
310
384
  }
311
385
 
312
386
  export default function NotionRenderer({ blocks }: NotionRendererProps) {
387
+ const [isClient, setIsClient] = React.useState(false);
388
+
389
+ React.useEffect(() => {
390
+ setIsClient(true);
391
+
392
+ // Load Twitter widgets script if tweet embeds exist
393
+ if (
394
+ typeof window !== 'undefined' &&
395
+ !(window as typeof window & { twttr?: any }).twttr
396
+ ) {
397
+ const script = document.createElement('script');
398
+ script.src = 'https://platform.twitter.com/widgets.js';
399
+ script.async = true;
400
+ script.charset = 'utf-8';
401
+ document.head.appendChild(script);
402
+ }
403
+ }, []);
404
+
313
405
  if (!blocks || blocks.length === 0) return null;
314
406
 
315
407
  return (
@@ -356,13 +448,23 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
356
448
 
357
449
  case "paragraph":
358
450
  return (
359
- <p key={i} style={{
451
+ <div key={i} style={{
360
452
  lineHeight: '1.625',
361
453
  marginBottom: '1rem',
362
454
  color: '#374151'
363
455
  }}>
364
- {block.text}
365
- </p>
456
+ {block.text && (block.text.includes('tweet-embed') || block.text.includes('youtube-embed') || block.text.includes('reading-time') || block.text.includes('table-of-contents') || block.text.includes('share-section') || block.text.includes('comment-section') || block.text.includes('image-gallery')) ? (
457
+ isClient ? (
458
+ <div style={{ display: 'flex', width: '100%', justifyContent: 'center' }} dangerouslySetInnerHTML={{ __html: block.text }} />
459
+ ) : (
460
+ <div style={{ padding: '1rem', textAlign: 'center', color: '#6b7280' }}>Loading content...</div>
461
+ )
462
+ ) : block.text && block.text.includes('<') ? (
463
+ <span dangerouslySetInnerHTML={{ __html: block.text }} />
464
+ ) : (
465
+ <p>{block.text}</p>
466
+ )}
467
+ </div>
366
468
  );
367
469
 
368
470
  case "quote":
@@ -409,6 +511,37 @@ export default function NotionRenderer({ blocks }: NotionRendererProps) {
409
511
  </pre>
410
512
  );
411
513
 
514
+ case "table":
515
+ return (
516
+ <div key={i} style={{ overflowX: 'auto', marginTop: '1.5rem', marginBottom: '1.5rem' }}>
517
+ <table style={{
518
+ minWidth: '100%',
519
+ border: '1px solid #d1d5db',
520
+ borderRadius: '0.5rem',
521
+ borderCollapse: 'collapse'
522
+ }}>
523
+ <tbody>
524
+ {block.rows?.map((row, rowIndex) => (
525
+ <tr key={rowIndex} style={rowIndex === 0 && block.hasColumnHeader ? {
526
+ backgroundColor: '#f9fafb',
527
+ fontWeight: '600'
528
+ } : {}}>
529
+ {row.cells.map((cell, cellIndex) => (
530
+ <td key={cellIndex} style={{
531
+ border: '1px solid #d1d5db',
532
+ padding: '0.5rem 1rem',
533
+ fontSize: '0.875rem'
534
+ }}>
535
+ {cell.join(' ')}
536
+ </td>
537
+ ))}
538
+ </tr>
539
+ ))}
540
+ </tbody>
541
+ </table>
542
+ </div>
543
+ );
544
+
412
545
  case "image":
413
546
  return (
414
547
  <figure key={i} style={{ marginTop: '2rem', marginBottom: '2rem' }}>
package/dist/templates/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/templates/components.ts"],"names":[],"mappings":";;AAEA,wDAEC;AAmdD,gDAsIC;AA3lBD,SAAgB,sBAAsB,CAAC,IAAuB;IAC5D,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,SAAS,yBAAyB,CAAC,IAAuB;IACxD,MAAM,WAAW,GAAG,iCAAiC,CAAC;IAEtD,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,4BAA4B;EAC5F,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyKX,CAAC;IACD,CAAC;IAED,sBAAsB;IACtB,IAAI,IAAI,CAAC,YAAY,KAAK,aAAa,EAAE,CAAC;QACxC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;EAClE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGX,CAAC;IACD,CAAC;IAED,sCAAsC;IACtC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;EAChE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6KX,CAAC;AACH,CAAC;AAED,SAAgB,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoIP,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/templates/components.ts"],"names":[],"mappings":";;AAEA,wDAEC;AAwlBD,gDAsIC;AAhuBD,SAAgB,sBAAsB,CAAC,IAAuB;IAC5D,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,SAAS,yBAAyB,CAAC,IAAuB;IACxD,MAAM,WAAW,GAAG,iCAAiC,CAAC;IAEtD,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,OAAO;;EAET,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,4BAA4B;EAChF,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgLX,CAAC;IACD,CAAC;IAED,sBAAsB;IACtB,IAAI,IAAI,CAAC,YAAY,KAAK,aAAa,EAAE,CAAC;QACxC,OAAO;;EAET,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,4BAA4B;EAChF,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8JX,CAAC;IACD,CAAC;IAED,sCAAsC;IACtC,OAAO;;EAEP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,4BAA4B;EAChF,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+OX,CAAC;AACH,CAAC;AAED,SAAgB,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoIP,CAAC;AACH,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chalknotes",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Transform your Notion pages into beautiful developer blogs with intelligent framework detection and plugin architecture",
5
5
  "main": "dist/index.js",
6
6
  "bin": {