@djangocfg/nextjs 2.1.19 → 2.1.21

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 (9) hide show
  1. package/dist/config/index.mjs +1 -1
  2. package/dist/config/index.mjs.map +1 -1
  3. package/dist/index.mjs +199 -185
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/og-image/components/index.mjs +196 -183
  6. package/dist/og-image/components/index.mjs.map +1 -1
  7. package/dist/og-image/index.mjs +198 -184
  8. package/dist/og-image/index.mjs.map +1 -1
  9. package/package.json +4 -4
package/dist/og-image/index.mjs CHANGED
@@ -306,6 +306,7 @@ function createOgImageMetadataGenerator(options) {
306
306
  }
307
307
 
308
308
  // src/og-image/components/DefaultTemplate.tsx
309
+ import { jsx, jsxs } from "react/jsx-runtime";
309
310
  function DefaultTemplate({
310
311
  title,
311
312
  description,
@@ -337,7 +338,7 @@ function DefaultTemplate({
337
338
  }) {
338
339
  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
339
340
  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
340
- const gridOverlay = devMode ? /* @__PURE__ */ React.createElement(
341
+ const gridOverlay = devMode ? /* @__PURE__ */ jsx(
341
342
  "div",
342
343
  {
343
344
  style: {
@@ -356,7 +357,7 @@ function DefaultTemplate({
356
357
  }
357
358
  }
358
359
  ) : null;
359
- return /* @__PURE__ */ React.createElement(
360
+ return /* @__PURE__ */ jsxs(
360
361
  "div",
361
362
  {
362
363
  style: {
@@ -370,102 +371,108 @@ function DefaultTemplate({
370
371
  padding: `${padding}px`,
371
372
  fontFamily: "system-ui, -apple-system, sans-serif",
372
373
  position: "relative"
373
- }
374
- },
375
- gridOverlay,
376
- (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
377
- "div",
378
- {
379
- style: {
380
- display: "flex",
381
- alignItems: "center",
382
- gap: "16px"
383
- }
384
374
  },
385
- showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
386
- /* @__PURE__ */ React.createElement(
387
- "img",
388
- {
389
- src: logo,
390
- alt: "Logo",
391
- width: logoSize,
392
- height: logoSize,
393
- style: {
394
- borderRadius: "8px"
375
+ children: [
376
+ gridOverlay,
377
+ (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
378
+ "div",
379
+ {
380
+ style: {
381
+ display: "flex",
382
+ alignItems: "center",
383
+ gap: "16px"
384
+ },
385
+ children: [
386
+ showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
387
+ /* @__PURE__ */ jsx(
388
+ "img",
389
+ {
390
+ src: logo,
391
+ alt: "Logo",
392
+ width: logoSize,
393
+ height: logoSize,
394
+ style: {
395
+ borderRadius: "8px"
396
+ }
397
+ }
398
+ ),
399
+ showSiteName && siteName && /* @__PURE__ */ jsx(
400
+ "div",
401
+ {
402
+ style: {
403
+ fontSize: siteNameSize,
404
+ fontWeight: 600,
405
+ color: siteNameColor,
406
+ letterSpacing: "-0.02em"
407
+ },
408
+ children: siteName
409
+ }
410
+ )
411
+ ]
395
412
  }
396
- }
397
- ),
398
- showSiteName && siteName && /* @__PURE__ */ React.createElement(
399
- "div",
400
- {
401
- style: {
402
- fontSize: siteNameSize,
403
- fontWeight: 600,
404
- color: siteNameColor,
405
- letterSpacing: "-0.02em"
406
- }
407
- },
408
- siteName
409
- )
410
- ),
411
- /* @__PURE__ */ React.createElement(
412
- "div",
413
- {
414
- style: {
415
- display: "flex",
416
- flexDirection: "column",
417
- gap: "24px",
418
- flex: 1,
419
- justifyContent: "center"
420
- }
421
- },
422
- /* @__PURE__ */ React.createElement(
423
- "div",
424
- {
425
- style: {
426
- fontSize: calculatedTitleSize,
427
- fontWeight: titleWeight,
428
- color: titleColor,
429
- lineHeight: 1.1,
430
- letterSpacing: "-0.03em",
431
- textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
432
- maxWidth: "100%",
433
- wordWrap: "break-word"
413
+ ),
414
+ /* @__PURE__ */ jsxs(
415
+ "div",
416
+ {
417
+ style: {
418
+ display: "flex",
419
+ flexDirection: "column",
420
+ gap: "24px",
421
+ flex: 1,
422
+ justifyContent: "center"
423
+ },
424
+ children: [
425
+ /* @__PURE__ */ jsx(
426
+ "div",
427
+ {
428
+ style: {
429
+ fontSize: calculatedTitleSize,
430
+ fontWeight: titleWeight,
431
+ color: titleColor,
432
+ lineHeight: 1.1,
433
+ letterSpacing: "-0.03em",
434
+ textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
435
+ maxWidth: "100%",
436
+ wordWrap: "break-word"
437
+ },
438
+ children: title
439
+ }
440
+ ),
441
+ description && /* @__PURE__ */ jsx(
442
+ "div",
443
+ {
444
+ style: {
445
+ fontSize: descriptionSize,
446
+ fontWeight: 400,
447
+ color: descriptionColor,
448
+ lineHeight: 1.5,
449
+ letterSpacing: "-0.01em",
450
+ maxWidth: "90%",
451
+ display: "-webkit-box",
452
+ WebkitLineClamp: 2,
453
+ WebkitBoxOrient: "vertical",
454
+ overflow: "hidden"
455
+ },
456
+ children: description
457
+ }
458
+ )
459
+ ]
434
460
  }
435
- },
436
- title
437
- ),
438
- description && /* @__PURE__ */ React.createElement(
439
- "div",
440
- {
441
- style: {
442
- fontSize: descriptionSize,
443
- fontWeight: 400,
444
- color: descriptionColor,
445
- lineHeight: 1.5,
446
- letterSpacing: "-0.01em",
447
- maxWidth: "90%",
448
- display: "-webkit-box",
449
- WebkitLineClamp: 2,
450
- WebkitBoxOrient: "vertical",
451
- overflow: "hidden"
461
+ ),
462
+ /* @__PURE__ */ jsx(
463
+ "div",
464
+ {
465
+ style: {
466
+ display: "flex",
467
+ width: "100%",
468
+ height: "4px",
469
+ background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
470
+ borderRadius: "2px"
471
+ }
452
472
  }
453
- },
454
- description
455
- )
456
- ),
457
- /* @__PURE__ */ React.createElement(
458
- "div",
459
- {
460
- style: {
461
- display: "flex",
462
- width: "100%",
463
- height: "4px",
464
- background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
465
- borderRadius: "2px"
466
- }
467
- }
468
- )
473
+ )
474
+ ]
475
+ }
469
476
  );
470
477
  }
471
478
  function LightTemplate({
@@ -499,7 +506,7 @@ function LightTemplate({
499
506
  }) {
500
507
  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
501
508
  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
502
- const gridOverlay = devMode ? /* @__PURE__ */ React.createElement(
509
+ const gridOverlay = devMode ? /* @__PURE__ */ jsx(
503
510
  "div",
504
511
  {
505
512
  style: {
@@ -518,7 +525,7 @@ function LightTemplate({
518
525
  }
519
526
  }
520
527
  ) : null;
521
- return /* @__PURE__ */ React.createElement(
528
+ return /* @__PURE__ */ jsxs(
522
529
  "div",
523
530
  {
524
531
  style: {
@@ -532,101 +539,108 @@ function LightTemplate({
532
539
  padding: `${padding}px`,
533
540
  fontFamily: "system-ui, -apple-system, sans-serif",
534
541
  position: "relative"
535
- }
536
- },
537
- gridOverlay,
538
- (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
539
- "div",
540
- {
541
- style: {
542
- display: "flex",
543
- alignItems: "center",
544
- gap: "16px"
545
- }
546
542
  },
547
- showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
548
- /* @__PURE__ */ React.createElement(
549
- "img",
550
- {
551
- src: logo,
552
- alt: "Logo",
553
- width: logoSize,
554
- height: logoSize,
555
- style: {
556
- borderRadius: "8px"
543
+ children: [
544
+ gridOverlay,
545
+ (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
546
+ "div",
547
+ {
548
+ style: {
549
+ display: "flex",
550
+ alignItems: "center",
551
+ gap: "16px"
552
+ },
553
+ children: [
554
+ showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
555
+ /* @__PURE__ */ jsx(
556
+ "img",
557
+ {
558
+ src: logo,
559
+ alt: "Logo",
560
+ width: logoSize,
561
+ height: logoSize,
562
+ style: {
563
+ borderRadius: "8px"
564
+ }
565
+ }
566
+ ),
567
+ showSiteName && siteName && /* @__PURE__ */ jsx(
568
+ "div",
569
+ {
570
+ style: {
571
+ fontSize: siteNameSize,
572
+ fontWeight: 600,
573
+ color: siteNameColor,
574
+ letterSpacing: "-0.02em"
575
+ },
576
+ children: siteName
577
+ }
578
+ )
579
+ ]
557
580
  }
558
- }
559
- ),
560
- showSiteName && siteName && /* @__PURE__ */ React.createElement(
561
- "div",
562
- {
563
- style: {
564
- fontSize: siteNameSize,
565
- fontWeight: 600,
566
- color: siteNameColor,
567
- letterSpacing: "-0.02em"
568
- }
569
- },
570
- siteName
571
- )
572
- ),
573
- /* @__PURE__ */ React.createElement(
574
- "div",
575
- {
576
- style: {
577
- display: "flex",
578
- flexDirection: "column",
579
- gap: "24px",
580
- flex: 1,
581
- justifyContent: "center"
582
- }
583
- },
584
- /* @__PURE__ */ React.createElement(
585
- "div",
586
- {
587
- style: {
588
- fontSize: calculatedTitleSize,
589
- fontWeight: titleWeight,
590
- color: titleColor,
591
- lineHeight: 1.1,
592
- letterSpacing: "-0.03em",
593
- maxWidth: "100%",
594
- wordWrap: "break-word"
581
+ ),
582
+ /* @__PURE__ */ jsxs(
583
+ "div",
584
+ {
585
+ style: {
586
+ display: "flex",
587
+ flexDirection: "column",
588
+ gap: "24px",
589
+ flex: 1,
590
+ justifyContent: "center"
591
+ },
592
+ children: [
593
+ /* @__PURE__ */ jsx(
594
+ "div",
595
+ {
596
+ style: {
597
+ fontSize: calculatedTitleSize,
598
+ fontWeight: titleWeight,
599
+ color: titleColor,
600
+ lineHeight: 1.1,
601
+ letterSpacing: "-0.03em",
602
+ maxWidth: "100%",
603
+ wordWrap: "break-word"
604
+ },
605
+ children: title
606
+ }
607
+ ),
608
+ description && /* @__PURE__ */ jsx(
609
+ "div",
610
+ {
611
+ style: {
612
+ fontSize: descriptionSize,
613
+ fontWeight: 400,
614
+ color: descriptionColor,
615
+ lineHeight: 1.5,
616
+ letterSpacing: "-0.01em",
617
+ maxWidth: "90%"
618
+ },
619
+ children: description
620
+ }
621
+ )
622
+ ]
595
623
  }
596
- },
597
- title
598
- ),
599
- description && /* @__PURE__ */ React.createElement(
600
- "div",
601
- {
602
- style: {
603
- fontSize: descriptionSize,
604
- fontWeight: 400,
605
- color: descriptionColor,
606
- lineHeight: 1.5,
607
- letterSpacing: "-0.01em",
608
- maxWidth: "90%"
624
+ ),
625
+ /* @__PURE__ */ jsx(
626
+ "div",
627
+ {
628
+ style: {
629
+ display: "flex",
630
+ width: "100%",
631
+ height: "4px",
632
+ background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
633
+ borderRadius: "2px"
634
+ }
609
635
  }
610
- },
611
- description
612
- )
613
- ),
614
- /* @__PURE__ */ React.createElement(
615
- "div",
616
- {
617
- style: {
618
- display: "flex",
619
- width: "100%",
620
- height: "4px",
621
- background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
622
- borderRadius: "2px"
623
- }
624
- }
625
- )
636
+ )
637
+ ]
638
+ }
626
639
  );
627
640
  }
628
641
 
629
642
  // src/og-image/route.tsx
643
+ import { jsx as jsx2 } from "react/jsx-runtime";
630
644
  function createOgImageHandler(config) {
631
645
  const {
632
646
  template: Template = DefaultTemplate,
@@ -760,7 +774,7 @@ function createOgImageHandler(config) {
760
774
  showSiteName: parseValue(decodedParams.showSiteName, "boolean") ?? defaultProps.showSiteName
761
775
  };
762
776
  return new ImageResponse(
763
- /* @__PURE__ */ React.createElement(Template, { ...templateProps }),
777
+ /* @__PURE__ */ jsx2(Template, { ...templateProps }),
764
778
  {
765
779
  width: size.width,
766
780
  height: size.height,