create-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.
- package/package.json +1 -1
- package/template/AGENTS.md +131 -0
- package/template/CLAUDE.md +1 -0
- package/template/package.json +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# pdf-smith
|
|
2
|
+
|
|
3
|
+
Build PDFs with React components and Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Project Structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
pdfs/
|
|
9
|
+
<slug>/
|
|
10
|
+
config.ts # Document configuration (optional)
|
|
11
|
+
pages/
|
|
12
|
+
Page1.tsx # Each .tsx file = one PDF page
|
|
13
|
+
Page2.tsx
|
|
14
|
+
...
|
|
15
|
+
styles.css # Tailwind CSS entry point
|
|
16
|
+
preview.ts # Dev server entry point
|
|
17
|
+
export.ts # PDF export entry point
|
|
18
|
+
output/ # Generated PDFs (gitignored)
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Each folder in `pdfs/` is a separate document identified by its slug. Pages within a document are ordered alphabetically by filename — use naming like `Page1.tsx`, `Page2.tsx` to control order.
|
|
22
|
+
|
|
23
|
+
## Creating a New Document
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
pnpm run add <slug>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Slug must be lowercase letters, numbers, and hyphens (e.g. `annual-report`). This creates `pdfs/<slug>/pages/Page1.tsx` and `pdfs/<slug>/config.ts`.
|
|
30
|
+
|
|
31
|
+
You can also create the folder structure manually.
|
|
32
|
+
|
|
33
|
+
## Writing Pages
|
|
34
|
+
|
|
35
|
+
Each `.tsx` file in `pages/` exports a default React component. The framework wraps it in an A4 page container automatically.
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import '../../../styles.css';
|
|
39
|
+
|
|
40
|
+
export default function Page1() {
|
|
41
|
+
return (
|
|
42
|
+
<div className="h-full flex flex-col p-12 font-sans">
|
|
43
|
+
<h1 className="text-3xl font-bold">Title</h1>
|
|
44
|
+
<p className="mt-4 text-gray-600">Content goes here.</p>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Key rules:
|
|
51
|
+
- Always import `styles.css` (relative path from the page file) to enable Tailwind
|
|
52
|
+
- Export a single default function component
|
|
53
|
+
- The component receives no props
|
|
54
|
+
- Tailwind CSS v4 utility classes are available
|
|
55
|
+
|
|
56
|
+
## Page Sizes
|
|
57
|
+
|
|
58
|
+
The default page size is A4. Available presets:
|
|
59
|
+
|
|
60
|
+
| Preset | Width | Height |
|
|
61
|
+
|----------|----------|----------|
|
|
62
|
+
| A4 | 210 mm | 297 mm |
|
|
63
|
+
| Letter | 215.9 mm | 279.4 mm |
|
|
64
|
+
| A3 | 297 mm | 420 mm |
|
|
65
|
+
|
|
66
|
+
To use a different size, import `Page` from `pdf-smith` and wrap your content:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { Page } from 'pdf-smith';
|
|
70
|
+
import '../../../styles.css';
|
|
71
|
+
|
|
72
|
+
export default function CoverPage() {
|
|
73
|
+
return (
|
|
74
|
+
<Page size="Letter" padding={16}>
|
|
75
|
+
<h1 className="text-4xl font-bold">Cover</h1>
|
|
76
|
+
</Page>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
The `padding` prop accepts a number (mm, all sides) or an object `{ top?, right?, bottom?, left? }` in mm.
|
|
82
|
+
|
|
83
|
+
Custom dimensions: `<Page size={{ width: 200, height: 300 }}>`.
|
|
84
|
+
|
|
85
|
+
## Document Configuration
|
|
86
|
+
|
|
87
|
+
Each document can have a `config.ts`:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
import { defineConfig } from 'pdf-smith';
|
|
91
|
+
|
|
92
|
+
export default defineConfig({
|
|
93
|
+
pageNumbers: {
|
|
94
|
+
enabled: true,
|
|
95
|
+
// Optional custom footer template:
|
|
96
|
+
// template: '<div style="font-size:10px;text-align:center;width:100%;"><span class="pageNumber"></span></div>'
|
|
97
|
+
},
|
|
98
|
+
output: 'custom-filename.pdf', // Default: <slug>.pdf
|
|
99
|
+
});
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
`pageNumbers.template` supports `<span class="pageNumber"></span>` and `<span class="totalPages"></span>` placeholders.
|
|
103
|
+
|
|
104
|
+
## Preview
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
pnpm run preview
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Starts a Vite dev server with hot module replacement. URL structure:
|
|
111
|
+
- `/` — home page listing all documents
|
|
112
|
+
- `/<slug>` — preview a specific document
|
|
113
|
+
|
|
114
|
+
The preview shows exactly what the exported PDF will look like.
|
|
115
|
+
|
|
116
|
+
## Export
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
pnpm run export # Export all documents
|
|
120
|
+
pnpm run export <slug> # Export a single document
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
PDFs are saved to the `output/` directory.
|
|
124
|
+
|
|
125
|
+
## Caveats
|
|
126
|
+
|
|
127
|
+
- **No auto-pagination.** Pages have fixed dimensions. Content that overflows a page will be clipped, not wrapped to the next page. You must manually split content across multiple page files.
|
|
128
|
+
- **Alphabetical page order.** Files in `pages/` are sorted alphabetically. Name files to control order: `Page1.tsx`, `Page2.tsx`, or `01-intro.tsx`, `02-body.tsx`.
|
|
129
|
+
- **Print-friendly styling.** Avoid interactive elements (buttons, inputs). Background colors and images render in the PDF. Use high-contrast colors for readability.
|
|
130
|
+
- **Images.** Use absolute URLs or local file imports. Relative URL paths will not resolve correctly in export.
|
|
131
|
+
- **One page per file.** Each `.tsx` file becomes exactly one page in the PDF. For multi-page documents, create multiple files.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@AGENTS.md
|