@ewanc26/og 0.1.4 → 0.1.6

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 (25) hide show
  1. package/dist/chunk-CM6746HS.js +360 -0
  2. package/dist/chunk-CM6746HS.js.map +1 -0
  3. package/dist/index.cjs +205 -153
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +7 -12
  6. package/dist/index.d.ts +7 -12
  7. package/dist/index.js +27 -75
  8. package/dist/index.js.map +1 -1
  9. package/dist/templates/index.cjs +179 -77
  10. package/dist/templates/index.cjs.map +1 -1
  11. package/dist/templates/index.d.cts +208 -85
  12. package/dist/templates/index.d.ts +208 -85
  13. package/dist/templates/index.js +1 -1
  14. package/package.json +63 -62
  15. package/src/endpoint.ts +4 -2
  16. package/src/fonts-base64.ts +7 -0
  17. package/src/fonts.ts +31 -109
  18. package/src/index.ts +1 -1
  19. package/src/templates/blog.ts +70 -36
  20. package/src/templates/default.ts +67 -33
  21. package/src/templates/profile.ts +40 -6
  22. package/dist/chunk-EPPJ2HBS.js +0 -258
  23. package/dist/chunk-EPPJ2HBS.js.map +0 -1
  24. package/dist/fonts/Inter-Bold.ttf +0 -0
  25. package/dist/fonts/Inter-Regular.ttf +0 -0
package/dist/templates/index.d.ts CHANGED
@@ -5,10 +5,11 @@ import { f as OgTemplateProps, e as OgTemplate } from '../types-Bn2R50Vr.js';
5
5
  * Clean centered layout.
6
6
  */
7
7
 
8
- declare function blogTemplate({ title, description, siteName, colors, width, height, }: OgTemplateProps): {
8
+ declare function blogTemplate({ title, description, siteName, colors, noiseDataUrl, width, height, }: OgTemplateProps): {
9
9
  type: string;
10
10
  props: {
11
11
  style: {
12
+ position: string;
12
13
  display: string;
13
14
  flexDirection: string;
14
15
  alignItems: string;
@@ -20,56 +21,96 @@ declare function blogTemplate({ title, description, siteName, colors, width, hei
20
21
  children: ({
21
22
  type: string;
22
23
  props: {
24
+ src: string;
25
+ width: number;
26
+ height: number;
23
27
  style: {
24
- fontSize: number;
25
- fontWeight: number;
26
- color: string;
27
- letterSpacing: string;
28
- margin: number;
29
- textAlign: string;
30
- lineHeight: number;
31
- maxWidth: number;
32
- marginTop?: undefined;
33
- marginBottom?: undefined;
34
- opacity?: undefined;
28
+ position: string;
29
+ top: number;
30
+ left: number;
31
+ width: number;
32
+ height: number;
33
+ display?: undefined;
34
+ flexDirection?: undefined;
35
+ alignItems?: undefined;
36
+ justifyContent?: undefined;
37
+ padding?: undefined;
35
38
  };
36
- children: string;
39
+ children?: undefined;
37
40
  };
38
41
  } | {
39
42
  type: string;
40
43
  props: {
41
44
  style: {
42
- fontSize: number;
43
- fontWeight: number;
44
- color: string;
45
- marginTop: number;
46
- marginBottom: number;
47
- textAlign: string;
48
- lineHeight: number;
49
- maxWidth: number;
50
- letterSpacing?: undefined;
51
- margin?: undefined;
52
- opacity?: undefined;
45
+ position: string;
46
+ display: string;
47
+ flexDirection: string;
48
+ alignItems: string;
49
+ justifyContent: string;
50
+ width: number;
51
+ height: number;
52
+ padding: string;
53
+ top?: undefined;
54
+ left?: undefined;
53
55
  };
54
- children: string;
55
- };
56
- } | {
57
- type: string;
58
- props: {
59
- style: {
60
- fontSize: number;
61
- fontWeight: number;
62
- color: string;
63
- marginTop: number;
64
- marginBottom: number;
65
- textAlign: string;
66
- opacity: number;
67
- letterSpacing?: undefined;
68
- margin?: undefined;
69
- lineHeight?: undefined;
70
- maxWidth?: undefined;
71
- };
72
- children: string;
56
+ children: ({
57
+ type: string;
58
+ props: {
59
+ style: {
60
+ fontSize: number;
61
+ fontWeight: number;
62
+ color: string;
63
+ letterSpacing: string;
64
+ margin: number;
65
+ textAlign: string;
66
+ lineHeight: number;
67
+ maxWidth: number;
68
+ marginTop?: undefined;
69
+ marginBottom?: undefined;
70
+ opacity?: undefined;
71
+ };
72
+ children: string;
73
+ };
74
+ } | {
75
+ type: string;
76
+ props: {
77
+ style: {
78
+ fontSize: number;
79
+ fontWeight: number;
80
+ color: string;
81
+ marginTop: number;
82
+ marginBottom: number;
83
+ textAlign: string;
84
+ lineHeight: number;
85
+ maxWidth: number;
86
+ letterSpacing?: undefined;
87
+ margin?: undefined;
88
+ opacity?: undefined;
89
+ };
90
+ children: string;
91
+ };
92
+ } | {
93
+ type: string;
94
+ props: {
95
+ style: {
96
+ fontSize: number;
97
+ fontWeight: number;
98
+ color: string;
99
+ marginTop: number;
100
+ marginBottom: number;
101
+ textAlign: string;
102
+ opacity: number;
103
+ letterSpacing?: undefined;
104
+ margin?: undefined;
105
+ lineHeight?: undefined;
106
+ maxWidth?: undefined;
107
+ };
108
+ children: string;
109
+ };
110
+ } | null)[];
111
+ src?: undefined;
112
+ width?: undefined;
113
+ height?: undefined;
73
114
  };
74
115
  } | null)[];
75
116
  };
@@ -80,10 +121,11 @@ declare function blogTemplate({ title, description, siteName, colors, width, hei
80
121
  * Centered layout.
81
122
  */
82
123
 
83
- declare function profileTemplate({ title, description, siteName, image, colors, width, height, }: OgTemplateProps): {
124
+ declare function profileTemplate({ title, description, siteName, image, colors, noiseDataUrl, width, height, }: OgTemplateProps): {
84
125
  type: string;
85
126
  props: {
86
127
  style: {
128
+ position: string;
87
129
  display: string;
88
130
  flexDirection: string;
89
131
  alignItems: string;
@@ -92,7 +134,47 @@ declare function profileTemplate({ title, description, siteName, image, colors,
92
134
  height: number;
93
135
  backgroundColor: string;
94
136
  };
95
- children: unknown[];
137
+ children: ({
138
+ type: string;
139
+ props: {
140
+ src: string;
141
+ width: number;
142
+ height: number;
143
+ style: {
144
+ position: string;
145
+ top: number;
146
+ left: number;
147
+ width: number;
148
+ height: number;
149
+ display?: undefined;
150
+ flexDirection?: undefined;
151
+ alignItems?: undefined;
152
+ justifyContent?: undefined;
153
+ padding?: undefined;
154
+ };
155
+ children?: undefined;
156
+ };
157
+ } | {
158
+ type: string;
159
+ props: {
160
+ style: {
161
+ position: string;
162
+ display: string;
163
+ flexDirection: string;
164
+ alignItems: string;
165
+ justifyContent: string;
166
+ width: number;
167
+ height: number;
168
+ padding: string;
169
+ top?: undefined;
170
+ left?: undefined;
171
+ };
172
+ children: unknown[];
173
+ src?: undefined;
174
+ width?: undefined;
175
+ height?: undefined;
176
+ };
177
+ } | null)[];
96
178
  };
97
179
  };
98
180
 
@@ -101,10 +183,11 @@ declare function profileTemplate({ title, description, siteName, image, colors,
101
183
  * Clean, centered layout.
102
184
  */
103
185
 
104
- declare function defaultTemplate({ title, description, siteName, colors, width, height, }: OgTemplateProps): {
186
+ declare function defaultTemplate({ title, description, siteName, colors, noiseDataUrl, width, height, }: OgTemplateProps): {
105
187
  type: string;
106
188
  props: {
107
189
  style: {
190
+ position: string;
108
191
  display: string;
109
192
  flexDirection: string;
110
193
  alignItems: string;
@@ -116,53 +199,93 @@ declare function defaultTemplate({ title, description, siteName, colors, width,
116
199
  children: ({
117
200
  type: string;
118
201
  props: {
202
+ src: string;
203
+ width: number;
204
+ height: number;
119
205
  style: {
120
- fontSize: number;
121
- fontWeight: number;
122
- color: string;
123
- letterSpacing: string;
124
- margin: number;
125
- textAlign: string;
126
- marginTop?: undefined;
127
- marginBottom?: undefined;
128
- maxWidth?: undefined;
129
- opacity?: undefined;
130
- };
131
- children: string;
132
- };
133
- } | {
134
- type: string;
135
- props: {
136
- style: {
137
- fontSize: number;
138
- fontWeight: number;
139
- color: string;
140
- marginTop: number;
141
- marginBottom: number;
142
- textAlign: string;
143
- maxWidth: number;
144
- letterSpacing?: undefined;
145
- margin?: undefined;
146
- opacity?: undefined;
206
+ position: string;
207
+ top: number;
208
+ left: number;
209
+ width: number;
210
+ height: number;
211
+ display?: undefined;
212
+ flexDirection?: undefined;
213
+ alignItems?: undefined;
214
+ justifyContent?: undefined;
215
+ padding?: undefined;
147
216
  };
148
- children: string;
217
+ children?: undefined;
149
218
  };
150
219
  } | {
151
220
  type: string;
152
221
  props: {
153
222
  style: {
154
- fontSize: number;
155
- fontWeight: number;
156
- color: string;
157
- marginTop: number;
158
- marginBottom: number;
159
- textAlign: string;
160
- opacity: number;
161
- letterSpacing?: undefined;
162
- margin?: undefined;
163
- maxWidth?: undefined;
223
+ position: string;
224
+ display: string;
225
+ flexDirection: string;
226
+ alignItems: string;
227
+ justifyContent: string;
228
+ width: number;
229
+ height: number;
230
+ padding: string;
231
+ top?: undefined;
232
+ left?: undefined;
164
233
  };
165
- children: string;
234
+ children: ({
235
+ type: string;
236
+ props: {
237
+ style: {
238
+ fontSize: number;
239
+ fontWeight: number;
240
+ color: string;
241
+ letterSpacing: string;
242
+ margin: number;
243
+ textAlign: string;
244
+ marginTop?: undefined;
245
+ marginBottom?: undefined;
246
+ maxWidth?: undefined;
247
+ opacity?: undefined;
248
+ };
249
+ children: string;
250
+ };
251
+ } | {
252
+ type: string;
253
+ props: {
254
+ style: {
255
+ fontSize: number;
256
+ fontWeight: number;
257
+ color: string;
258
+ marginTop: number;
259
+ marginBottom: number;
260
+ textAlign: string;
261
+ maxWidth: number;
262
+ letterSpacing?: undefined;
263
+ margin?: undefined;
264
+ opacity?: undefined;
265
+ };
266
+ children: string;
267
+ };
268
+ } | {
269
+ type: string;
270
+ props: {
271
+ style: {
272
+ fontSize: number;
273
+ fontWeight: number;
274
+ color: string;
275
+ marginTop: number;
276
+ marginBottom: number;
277
+ textAlign: string;
278
+ opacity: number;
279
+ letterSpacing?: undefined;
280
+ margin?: undefined;
281
+ maxWidth?: undefined;
282
+ };
283
+ children: string;
284
+ };
285
+ } | null)[];
286
+ src?: undefined;
287
+ width?: undefined;
288
+ height?: undefined;
166
289
  };
167
290
  } | null)[];
168
291
  };
package/dist/templates/index.js CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  getTemplate,
5
5
  profileTemplate,
6
6
  templates
7
- } from "../chunk-EPPJ2HBS.js";
7
+ } from "../chunk-CM6746HS.js";
8
8
  export {
9
9
  blogTemplate,
10
10
  defaultTemplate,
package/package.json CHANGED
@@ -1,63 +1,64 @@
1
1
  {
2
- "name": "@ewanc26/og",
3
- "version": "0.1.4",
4
- "description": "Dynamic OpenGraph image generator with noise backgrounds, bold typography, and Satori-based rendering. Works in SvelteKit endpoints, edge runtimes, and build scripts.",
5
- "author": "Ewan Croft",
6
- "license": "AGPL-3.0-only",
7
- "type": "module",
8
- "keywords": [
9
- "og",
10
- "opengraph",
11
- "image",
12
- "satori",
13
- "sveltekit",
14
- "seo",
15
- "social"
16
- ],
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/ewanc26/pkgs.git",
20
- "directory": "packages/og"
21
- },
22
- "homepage": "https://github.com/ewanc26/pkgs/tree/main/packages/og",
23
- "bugs": {
24
- "url": "https://github.com/ewanc26/pkgs/issues"
25
- },
26
- "publishConfig": {
27
- "access": "public"
28
- },
29
- "files": [
30
- "dist",
31
- "src",
32
- "fonts"
33
- ],
34
- "exports": {
35
- ".": {
36
- "types": "./dist/index.d.ts",
37
- "import": "./dist/index.js",
38
- "require": "./dist/index.cjs"
39
- },
40
- "./templates": {
41
- "types": "./dist/templates/index.d.ts",
42
- "import": "./dist/templates/index.js"
43
- }
44
- },
45
- "main": "./dist/index.cjs",
46
- "module": "./dist/index.js",
47
- "types": "./dist/index.d.ts",
48
- "scripts": {
49
- "build": "tsup",
50
- "dev": "tsup --watch",
51
- "check": "tsc --noEmit"
52
- },
53
- "dependencies": {
54
- "@ewanc26/noise": "^0.1.3",
55
- "@resvg/resvg-js": "^2.6.0",
56
- "satori": "^0.15.2"
57
- },
58
- "devDependencies": {
59
- "@types/node": "^25.5.0",
60
- "tsup": "^8.5.1",
61
- "typescript": "^5.9.3"
62
- }
63
- }
2
+ "name": "@ewanc26/og",
3
+ "version": "0.1.6",
4
+ "description": "Dynamic OpenGraph image generator with noise backgrounds, bold typography, and Satori-based rendering. Works in SvelteKit endpoints, edge runtimes, and build scripts.",
5
+ "author": "Ewan Croft",
6
+ "license": "AGPL-3.0-only",
7
+ "type": "module",
8
+ "keywords": [
9
+ "og",
10
+ "opengraph",
11
+ "image",
12
+ "satori",
13
+ "sveltekit",
14
+ "seo",
15
+ "social"
16
+ ],
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/ewanc26/pkgs.git",
20
+ "directory": "packages/og"
21
+ },
22
+ "homepage": "https://github.com/ewanc26/pkgs/tree/main/packages/og",
23
+ "bugs": {
24
+ "url": "https://github.com/ewanc26/pkgs/issues"
25
+ },
26
+ "publishConfig": {
27
+ "access": "public"
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "src",
32
+ "fonts"
33
+ ],
34
+ "exports": {
35
+ ".": {
36
+ "types": "./dist/index.d.ts",
37
+ "import": "./dist/index.js",
38
+ "require": "./dist/index.cjs"
39
+ },
40
+ "./templates": {
41
+ "types": "./dist/templates/index.d.ts",
42
+ "import": "./dist/templates/index.js"
43
+ }
44
+ },
45
+ "main": "./dist/index.cjs",
46
+ "module": "./dist/index.js",
47
+ "types": "./dist/index.d.ts",
48
+ "dependencies": {
49
+ "@ewanc26/noise": "^0.1.3",
50
+ "@resvg/resvg-js": "^2.6.0",
51
+ "satori": "^0.15.2"
52
+ },
53
+ "devDependencies": {
54
+ "@types/node": "^25.5.0",
55
+ "tsup": "^8.5.1",
56
+ "typescript": "^5.9.3"
57
+ },
58
+ "scripts": {
59
+ "prebuild": "node scripts/prebuild.mjs",
60
+ "build": "tsup",
61
+ "dev": "node scripts/prebuild.mjs && tsup --watch",
62
+ "check": "tsc --noEmit"
63
+ }
64
+ }
package/src/endpoint.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  import { generateOgResponse } from './generate.js'
6
- import type { OgEndpointOptions, OgTemplate } from './types.js'
6
+ import type { OgEndpointOptions, OgGenerateOptions } from './types.js'
7
7
 
8
8
  /**
9
9
  * Create a SvelteKit GET handler for OG image generation.
@@ -42,6 +42,8 @@ export function createOgEndpoint(options: OgEndpointOptions) {
42
42
  const description = url.searchParams.get('description') ?? undefined
43
43
  const image = url.searchParams.get('image') ?? undefined
44
44
  const noiseSeed = url.searchParams.get('seed') ?? undefined
45
+ const templateParam = url.searchParams.get('template') as 'blog' | 'profile' | 'default' | null
46
+ const resolvedTemplate: OgGenerateOptions['template'] = templateParam ?? template
45
47
 
46
48
  if (!title) {
47
49
  return new Response('Missing title parameter', { status: 400 })
@@ -54,7 +56,7 @@ export function createOgEndpoint(options: OgEndpointOptions) {
54
56
  description,
55
57
  siteName,
56
58
  image,
57
- template: template as OgTemplate,
59
+ template: resolvedTemplate,
58
60
  colors,
59
61
  fonts,
60
62
  noise,