@djangocfg/nextjs 2.1.20 → 2.1.22

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