pdf-smith 0.3.0 → 0.4.0

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/preview/home.tsx +26 -300
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pdf-smith",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Build beautiful PDFs with React components and Tailwind CSS",
5
5
  "author": "Kareem Elbahrawy",
6
6
  "license": "MIT",
package/src/preview/home.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { getDocuments } from 'virtual:pdf-smith-documents';
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { colors, fonts, radii, VERSION } from './design-tokens';
4
- import { AnvilIcon, AnvilIconWhite, DocumentIcon, SearchIcon } from './icons';
4
+ import { DocumentIcon, SearchIcon } from './icons';
5
5
 
6
6
  function formatSlug(slug: string): string {
7
7
  return slug
@@ -34,98 +34,8 @@ export function HomePage() {
34
34
 
35
35
  return (
36
36
  <div style={{ minHeight: '100vh', background: colors.stone900, color: colors.stone100 }}>
37
- {/* Top Bar */}
38
- <header
39
- style={{
40
- display: 'flex',
41
- alignItems: 'center',
42
- justifyContent: 'space-between',
43
- padding: '12px 24px',
44
- background: colors.stone950,
45
- borderBottom: `1px solid ${colors.stone800}`,
46
- }}
47
- >
48
- <a
49
- href="/"
50
- style={{
51
- display: 'flex',
52
- alignItems: 'center',
53
- gap: '10px',
54
- textDecoration: 'none',
55
- color: colors.stone100,
56
- }}
57
- >
58
- <AnvilIcon size={24} />
59
- <span
60
- style={{
61
- fontFamily: fonts.display,
62
- fontSize: '18px',
63
- fontWeight: 700,
64
- fontVariationSettings: "'WONK' 1, 'SOFT' 50",
65
- }}
66
- >
67
- pdf-smith
68
- </span>
69
- </a>
70
- <span
71
- style={{
72
- fontFamily: fonts.mono,
73
- fontSize: '11px',
74
- color: colors.stone500,
75
- background: colors.stone800,
76
- padding: '3px 10px',
77
- borderRadius: radii.full,
78
- border: `1px solid ${colors.stone700}`,
79
- }}
80
- >
81
- v{VERSION}
82
- </span>
83
- </header>
84
-
85
37
  {/* Main */}
86
- <main style={{ maxWidth: '960px', margin: '0 auto', padding: '64px 32px' }}>
87
- {/* Hero */}
88
- <div style={{ textAlign: 'center', marginBottom: '64px' }}>
89
- <div
90
- style={{
91
- width: '56px',
92
- height: '56px',
93
- margin: '0 auto 24px',
94
- display: 'flex',
95
- alignItems: 'center',
96
- justifyContent: 'center',
97
- background: `linear-gradient(135deg, ${colors.forge}, ${colors.amber})`,
98
- borderRadius: '14px',
99
- }}
100
- >
101
- <AnvilIconWhite size={28} />
102
- </div>
103
- <h1
104
- style={{
105
- fontFamily: fonts.display,
106
- fontSize: '40px',
107
- fontWeight: 800,
108
- fontVariationSettings: "'WONK' 1, 'SOFT' 50",
109
- color: colors.stone50,
110
- letterSpacing: '-0.02em',
111
- marginBottom: '8px',
112
- }}
113
- >
114
- Your Documents
115
- </h1>
116
- <p
117
- style={{
118
- fontSize: '16px',
119
- color: colors.stone400,
120
- maxWidth: '420px',
121
- margin: '0 auto',
122
- }}
123
- >
124
- {slugs.length} document{slugs.length !== 1 ? 's' : ''} &middot; Preview and export your
125
- React-powered PDFs
126
- </p>
127
- </div>
128
-
38
+ <main style={{ maxWidth: '960px', margin: '0 auto', padding: '32px' }}>
129
39
  {/* Search */}
130
40
  <div style={{ position: 'relative', maxWidth: '480px', margin: '0 auto 48px' }}>
131
41
  <SearchIcon
@@ -207,15 +117,9 @@ export function HomePage() {
207
117
  </span>
208
118
  </div>
209
119
 
210
- {/* Document Grid or Empty State */}
120
+ {/* Document List or Empty State */}
211
121
  {filtered.length > 0 ? (
212
- <div
213
- style={{
214
- display: 'grid',
215
- gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
216
- gap: '16px',
217
- }}
218
- >
122
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
219
123
  {filtered.map((slug, i) => {
220
124
  const doc = documents[slug];
221
125
  const pageCount = Object.keys(doc.pages).length;
@@ -231,11 +135,13 @@ export function HomePage() {
231
135
  key={slug}
232
136
  href={`/${slug}`}
233
137
  style={{
234
- display: 'block',
138
+ display: 'flex',
139
+ alignItems: 'center',
140
+ gap: '12px',
235
141
  background: colors.stone800,
236
142
  border: `1px solid ${colors.stone700}`,
237
- borderRadius: '10px',
238
- padding: '20px',
143
+ borderRadius: radii.lg,
144
+ padding: '12px 16px',
239
145
  textDecoration: 'none',
240
146
  color: 'inherit',
241
147
  transition: 'all 0.15s',
@@ -245,106 +151,48 @@ export function HomePage() {
245
151
  const el = e.currentTarget;
246
152
  el.style.borderColor = colors.stone600;
247
153
  el.style.background = '#2C2826';
248
- el.style.transform = 'translateY(-1px)';
249
- el.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.3)';
250
154
  }}
251
155
  onMouseLeave={(e) => {
252
156
  const el = e.currentTarget;
253
157
  el.style.borderColor = colors.stone700;
254
158
  el.style.background = colors.stone800;
255
- el.style.transform = 'none';
256
- el.style.boxShadow = 'none';
257
159
  }}
258
160
  >
259
- {/* Card Header */}
260
161
  <div
261
162
  style={{
163
+ width: '28px',
164
+ height: '28px',
262
165
  display: 'flex',
263
- alignItems: 'flex-start',
264
- justifyContent: 'space-between',
265
- marginBottom: '12px',
166
+ alignItems: 'center',
167
+ justifyContent: 'center',
168
+ borderRadius: radii.md,
169
+ background: ic.bg,
170
+ color: ic.fg,
171
+ flexShrink: 0,
266
172
  }}
267
173
  >
268
- <div
269
- style={{
270
- width: '36px',
271
- height: '36px',
272
- display: 'flex',
273
- alignItems: 'center',
274
- justifyContent: 'center',
275
- borderRadius: radii.lg,
276
- background: ic.bg,
277
- color: ic.fg,
278
- flexShrink: 0,
279
- }}
280
- >
281
- <DocumentIcon size={18} />
282
- </div>
283
- <div
284
- style={{
285
- display: 'flex',
286
- alignItems: 'center',
287
- gap: '4px',
288
- fontSize: '11px',
289
- fontFamily: fonts.mono,
290
- color: colors.stone500,
291
- }}
292
- >
293
- <span
294
- style={{
295
- width: '6px',
296
- height: '6px',
297
- borderRadius: '50%',
298
- background: colors.success,
299
- display: 'inline-block',
300
- }}
301
- />
302
- Ready
303
- </div>
174
+ <DocumentIcon size={14} />
304
175
  </div>
305
-
306
- {/* Title */}
307
- <div
176
+ <span
308
177
  style={{
309
178
  fontFamily: fonts.heading,
310
- fontSize: '16px',
179
+ fontSize: '14px',
311
180
  fontWeight: 600,
312
181
  color: colors.stone100,
313
- marginBottom: '4px',
314
182
  }}
315
183
  >
316
184
  {formatSlug(slug)}
317
- </div>
318
- <div
185
+ </span>
186
+ <span
319
187
  style={{
320
- fontFamily: fonts.mono,
188
+ marginLeft: 'auto',
321
189
  fontSize: '12px',
190
+ fontFamily: fonts.mono,
322
191
  color: colors.stone500,
323
- marginBottom: '12px',
324
192
  }}
325
193
  >
326
- pdfs/{slug}
327
- </div>
328
-
329
- {/* Footer */}
330
- <div
331
- style={{
332
- display: 'flex',
333
- alignItems: 'center',
334
- justifyContent: 'space-between',
335
- paddingTop: '12px',
336
- borderTop: `1px solid ${colors.stone700}`,
337
- }}
338
- >
339
- <span
340
- style={{ fontSize: '12px', fontFamily: fonts.mono, color: colors.stone500 }}
341
- >
342
- <strong style={{ color: colors.stone300, fontWeight: 600 }}>
343
- {pageCount}
344
- </strong>{' '}
345
- page{pageCount !== 1 ? 's' : ''}
346
- </span>
347
- </div>
194
+ {pageCount} page{pageCount !== 1 ? 's' : ''}
195
+ </span>
348
196
  </a>
349
197
  );
350
198
  })}
@@ -389,128 +237,6 @@ export function HomePage() {
389
237
  </div>
390
238
  )}
391
239
 
392
- {/* Quick Start */}
393
- {slugs.length > 0 && (
394
- <div
395
- style={{
396
- marginTop: '64px',
397
- padding: '32px',
398
- background: colors.stone800,
399
- border: `1px solid ${colors.stone700}`,
400
- borderRadius: radii.xl,
401
- }}
402
- >
403
- <h3
404
- style={{
405
- fontFamily: fonts.heading,
406
- fontSize: '16px',
407
- fontWeight: 600,
408
- color: colors.stone200,
409
- marginBottom: '16px',
410
- }}
411
- >
412
- Quick Start
413
- </h3>
414
- <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
415
- {[
416
- {
417
- title: 'Add a document',
418
- desc: (
419
- <>
420
- Run{' '}
421
- <code
422
- style={{
423
- fontFamily: fonts.mono,
424
- fontSize: '11px',
425
- background: colors.stone900,
426
- padding: '1px 6px',
427
- borderRadius: '3px',
428
- color: colors.ember,
429
- }}
430
- >
431
- pdf-smith add my-doc
432
- </code>{' '}
433
- to scaffold a new document with sample pages.
434
- </>
435
- ),
436
- },
437
- {
438
- title: 'Edit pages',
439
- desc: 'Write React components with Tailwind. Changes hot-reload instantly.',
440
- },
441
- {
442
- title: 'Export PDF',
443
- desc: (
444
- <>
445
- Run{' '}
446
- <code
447
- style={{
448
- fontFamily: fonts.mono,
449
- fontSize: '11px',
450
- background: colors.stone900,
451
- padding: '1px 6px',
452
- borderRadius: '3px',
453
- color: colors.ember,
454
- }}
455
- >
456
- npm run export
457
- </code>{' '}
458
- to generate pixel-perfect PDFs.
459
- </>
460
- ),
461
- },
462
- ].map((step, idx) => (
463
- <div
464
- key={step.title}
465
- style={{
466
- display: 'flex',
467
- alignItems: 'flex-start',
468
- gap: '12px',
469
- padding: '16px',
470
- background: colors.stone900,
471
- borderRadius: radii.lg,
472
- border: '1px solid transparent',
473
- }}
474
- >
475
- <span
476
- style={{
477
- width: '24px',
478
- height: '24px',
479
- display: 'flex',
480
- alignItems: 'center',
481
- justifyContent: 'center',
482
- background: colors.forge,
483
- color: 'white',
484
- fontFamily: fonts.mono,
485
- fontSize: '12px',
486
- fontWeight: 600,
487
- borderRadius: radii.md,
488
- flexShrink: 0,
489
- }}
490
- >
491
- {idx + 1}
492
- </span>
493
- <div>
494
- <h4
495
- style={{
496
- fontSize: '13px',
497
- fontWeight: 600,
498
- color: colors.stone200,
499
- marginBottom: '2px',
500
- }}
501
- >
502
- {step.title}
503
- </h4>
504
- <p style={{ fontSize: '12px', color: colors.stone500, lineHeight: 1.4 }}>
505
- {step.desc}
506
- </p>
507
- </div>
508
- </div>
509
- ))}
510
- </div>
511
- </div>
512
- )}
513
-
514
240
  {/* Footer */}
515
241
  <footer
516
242
  style={{