@djangocfg/nextjs 2.1.20 → 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 (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/index.mjs CHANGED
@@ -14,7 +14,7 @@ var require_package = __commonJS({
14
14
  "package.json"(exports, module) {
15
15
  module.exports = {
16
16
  name: "@djangocfg/nextjs",
17
- version: "2.1.20",
17
+ version: "2.1.21",
18
18
  description: "Next.js server utilities: sitemap, health, OG images, contact forms, navigation, config",
19
19
  keywords: [
20
20
  "nextjs",
@@ -561,7 +561,7 @@ function createOgImageMetadataGenerator(options) {
561
561
  }
562
562
 
563
563
  // src/og-image/components/DefaultTemplate.tsx
564
- import React2 from "react";
564
+ import { jsx, jsxs } from "react/jsx-runtime";
565
565
  function DefaultTemplate({
566
566
  title,
567
567
  description,
@@ -593,7 +593,7 @@ function DefaultTemplate({
593
593
  }) {
594
594
  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
595
595
  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
596
- const gridOverlay = devMode ? /* @__PURE__ */ React2.createElement(
596
+ const gridOverlay = devMode ? /* @__PURE__ */ jsx(
597
597
  "div",
598
598
  {
599
599
  style: {
@@ -612,7 +612,7 @@ function DefaultTemplate({
612
612
  }
613
613
  }
614
614
  ) : null;
615
- return /* @__PURE__ */ React2.createElement(
615
+ return /* @__PURE__ */ jsxs(
616
616
  "div",
617
617
  {
618
618
  style: {
@@ -626,102 +626,108 @@ function DefaultTemplate({
626
626
  padding: `${padding}px`,
627
627
  fontFamily: "system-ui, -apple-system, sans-serif",
628
628
  position: "relative"
629
- }
630
- },
631
- gridOverlay,
632
- (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React2.createElement(
633
- "div",
634
- {
635
- style: {
636
- display: "flex",
637
- alignItems: "center",
638
- gap: "16px"
639
- }
640
629
  },
641
- showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
642
- /* @__PURE__ */ React2.createElement(
643
- "img",
644
- {
645
- src: logo,
646
- alt: "Logo",
647
- width: logoSize,
648
- height: logoSize,
649
- style: {
650
- borderRadius: "8px"
630
+ children: [
631
+ gridOverlay,
632
+ (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
633
+ "div",
634
+ {
635
+ style: {
636
+ display: "flex",
637
+ alignItems: "center",
638
+ gap: "16px"
639
+ },
640
+ children: [
641
+ showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
642
+ /* @__PURE__ */ jsx(
643
+ "img",
644
+ {
645
+ src: logo,
646
+ alt: "Logo",
647
+ width: logoSize,
648
+ height: logoSize,
649
+ style: {
650
+ borderRadius: "8px"
651
+ }
652
+ }
653
+ ),
654
+ showSiteName && siteName && /* @__PURE__ */ jsx(
655
+ "div",
656
+ {
657
+ style: {
658
+ fontSize: siteNameSize,
659
+ fontWeight: 600,
660
+ color: siteNameColor,
661
+ letterSpacing: "-0.02em"
662
+ },
663
+ children: siteName
664
+ }
665
+ )
666
+ ]
651
667
  }
652
- }
653
- ),
654
- showSiteName && siteName && /* @__PURE__ */ React2.createElement(
655
- "div",
656
- {
657
- style: {
658
- fontSize: siteNameSize,
659
- fontWeight: 600,
660
- color: siteNameColor,
661
- letterSpacing: "-0.02em"
662
- }
663
- },
664
- siteName
665
- )
666
- ),
667
- /* @__PURE__ */ React2.createElement(
668
- "div",
669
- {
670
- style: {
671
- display: "flex",
672
- flexDirection: "column",
673
- gap: "24px",
674
- flex: 1,
675
- justifyContent: "center"
676
- }
677
- },
678
- /* @__PURE__ */ React2.createElement(
679
- "div",
680
- {
681
- style: {
682
- fontSize: calculatedTitleSize,
683
- fontWeight: titleWeight,
684
- color: titleColor,
685
- lineHeight: 1.1,
686
- letterSpacing: "-0.03em",
687
- textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
688
- maxWidth: "100%",
689
- wordWrap: "break-word"
668
+ ),
669
+ /* @__PURE__ */ jsxs(
670
+ "div",
671
+ {
672
+ style: {
673
+ display: "flex",
674
+ flexDirection: "column",
675
+ gap: "24px",
676
+ flex: 1,
677
+ justifyContent: "center"
678
+ },
679
+ children: [
680
+ /* @__PURE__ */ jsx(
681
+ "div",
682
+ {
683
+ style: {
684
+ fontSize: calculatedTitleSize,
685
+ fontWeight: titleWeight,
686
+ color: titleColor,
687
+ lineHeight: 1.1,
688
+ letterSpacing: "-0.03em",
689
+ textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
690
+ maxWidth: "100%",
691
+ wordWrap: "break-word"
692
+ },
693
+ children: title
694
+ }
695
+ ),
696
+ description && /* @__PURE__ */ jsx(
697
+ "div",
698
+ {
699
+ style: {
700
+ fontSize: descriptionSize,
701
+ fontWeight: 400,
702
+ color: descriptionColor,
703
+ lineHeight: 1.5,
704
+ letterSpacing: "-0.01em",
705
+ maxWidth: "90%",
706
+ display: "-webkit-box",
707
+ WebkitLineClamp: 2,
708
+ WebkitBoxOrient: "vertical",
709
+ overflow: "hidden"
710
+ },
711
+ children: description
712
+ }
713
+ )
714
+ ]
690
715
  }
691
- },
692
- title
693
- ),
694
- description && /* @__PURE__ */ React2.createElement(
695
- "div",
696
- {
697
- style: {
698
- fontSize: descriptionSize,
699
- fontWeight: 400,
700
- color: descriptionColor,
701
- lineHeight: 1.5,
702
- letterSpacing: "-0.01em",
703
- maxWidth: "90%",
704
- display: "-webkit-box",
705
- WebkitLineClamp: 2,
706
- WebkitBoxOrient: "vertical",
707
- overflow: "hidden"
716
+ ),
717
+ /* @__PURE__ */ jsx(
718
+ "div",
719
+ {
720
+ style: {
721
+ display: "flex",
722
+ width: "100%",
723
+ height: "4px",
724
+ background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
725
+ borderRadius: "2px"
726
+ }
708
727
  }
709
- },
710
- description
711
- )
712
- ),
713
- /* @__PURE__ */ React2.createElement(
714
- "div",
715
- {
716
- style: {
717
- display: "flex",
718
- width: "100%",
719
- height: "4px",
720
- background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
721
- borderRadius: "2px"
722
- }
723
- }
724
- )
728
+ )
729
+ ]
730
+ }
725
731
  );
726
732
  }
727
733
  function LightTemplate({
@@ -755,7 +761,7 @@ function LightTemplate({
755
761
  }) {
756
762
  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
757
763
  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
758
- const gridOverlay = devMode ? /* @__PURE__ */ React2.createElement(
764
+ const gridOverlay = devMode ? /* @__PURE__ */ jsx(
759
765
  "div",
760
766
  {
761
767
  style: {
@@ -774,7 +780,7 @@ function LightTemplate({
774
780
  }
775
781
  }
776
782
  ) : null;
777
- return /* @__PURE__ */ React2.createElement(
783
+ return /* @__PURE__ */ jsxs(
778
784
  "div",
779
785
  {
780
786
  style: {
@@ -788,101 +794,108 @@ function LightTemplate({
788
794
  padding: `${padding}px`,
789
795
  fontFamily: "system-ui, -apple-system, sans-serif",
790
796
  position: "relative"
791
- }
792
- },
793
- gridOverlay,
794
- (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React2.createElement(
795
- "div",
796
- {
797
- style: {
798
- display: "flex",
799
- alignItems: "center",
800
- gap: "16px"
801
- }
802
797
  },
803
- showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
804
- /* @__PURE__ */ React2.createElement(
805
- "img",
806
- {
807
- src: logo,
808
- alt: "Logo",
809
- width: logoSize,
810
- height: logoSize,
811
- style: {
812
- borderRadius: "8px"
798
+ children: [
799
+ gridOverlay,
800
+ (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
801
+ "div",
802
+ {
803
+ style: {
804
+ display: "flex",
805
+ alignItems: "center",
806
+ gap: "16px"
807
+ },
808
+ children: [
809
+ showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
810
+ /* @__PURE__ */ jsx(
811
+ "img",
812
+ {
813
+ src: logo,
814
+ alt: "Logo",
815
+ width: logoSize,
816
+ height: logoSize,
817
+ style: {
818
+ borderRadius: "8px"
819
+ }
820
+ }
821
+ ),
822
+ showSiteName && siteName && /* @__PURE__ */ jsx(
823
+ "div",
824
+ {
825
+ style: {
826
+ fontSize: siteNameSize,
827
+ fontWeight: 600,
828
+ color: siteNameColor,
829
+ letterSpacing: "-0.02em"
830
+ },
831
+ children: siteName
832
+ }
833
+ )
834
+ ]
813
835
  }
814
- }
815
- ),
816
- showSiteName && siteName && /* @__PURE__ */ React2.createElement(
817
- "div",
818
- {
819
- style: {
820
- fontSize: siteNameSize,
821
- fontWeight: 600,
822
- color: siteNameColor,
823
- letterSpacing: "-0.02em"
824
- }
825
- },
826
- siteName
827
- )
828
- ),
829
- /* @__PURE__ */ React2.createElement(
830
- "div",
831
- {
832
- style: {
833
- display: "flex",
834
- flexDirection: "column",
835
- gap: "24px",
836
- flex: 1,
837
- justifyContent: "center"
838
- }
839
- },
840
- /* @__PURE__ */ React2.createElement(
841
- "div",
842
- {
843
- style: {
844
- fontSize: calculatedTitleSize,
845
- fontWeight: titleWeight,
846
- color: titleColor,
847
- lineHeight: 1.1,
848
- letterSpacing: "-0.03em",
849
- maxWidth: "100%",
850
- wordWrap: "break-word"
836
+ ),
837
+ /* @__PURE__ */ jsxs(
838
+ "div",
839
+ {
840
+ style: {
841
+ display: "flex",
842
+ flexDirection: "column",
843
+ gap: "24px",
844
+ flex: 1,
845
+ justifyContent: "center"
846
+ },
847
+ children: [
848
+ /* @__PURE__ */ jsx(
849
+ "div",
850
+ {
851
+ style: {
852
+ fontSize: calculatedTitleSize,
853
+ fontWeight: titleWeight,
854
+ color: titleColor,
855
+ lineHeight: 1.1,
856
+ letterSpacing: "-0.03em",
857
+ maxWidth: "100%",
858
+ wordWrap: "break-word"
859
+ },
860
+ children: title
861
+ }
862
+ ),
863
+ description && /* @__PURE__ */ jsx(
864
+ "div",
865
+ {
866
+ style: {
867
+ fontSize: descriptionSize,
868
+ fontWeight: 400,
869
+ color: descriptionColor,
870
+ lineHeight: 1.5,
871
+ letterSpacing: "-0.01em",
872
+ maxWidth: "90%"
873
+ },
874
+ children: description
875
+ }
876
+ )
877
+ ]
851
878
  }
852
- },
853
- title
854
- ),
855
- description && /* @__PURE__ */ React2.createElement(
856
- "div",
857
- {
858
- style: {
859
- fontSize: descriptionSize,
860
- fontWeight: 400,
861
- color: descriptionColor,
862
- lineHeight: 1.5,
863
- letterSpacing: "-0.01em",
864
- maxWidth: "90%"
879
+ ),
880
+ /* @__PURE__ */ jsx(
881
+ "div",
882
+ {
883
+ style: {
884
+ display: "flex",
885
+ width: "100%",
886
+ height: "4px",
887
+ background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
888
+ borderRadius: "2px"
889
+ }
865
890
  }
866
- },
867
- description
868
- )
869
- ),
870
- /* @__PURE__ */ React2.createElement(
871
- "div",
872
- {
873
- style: {
874
- display: "flex",
875
- width: "100%",
876
- height: "4px",
877
- background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
878
- borderRadius: "2px"
879
- }
880
- }
881
- )
891
+ )
892
+ ]
893
+ }
882
894
  );
883
895
  }
884
896
 
885
897
  // src/og-image/route.tsx
898
+ import { jsx as jsx2 } from "react/jsx-runtime";
886
899
  function createOgImageHandler(config) {
887
900
  const {
888
901
  template: Template = DefaultTemplate,
@@ -1016,7 +1029,7 @@ function createOgImageHandler(config) {
1016
1029
  showSiteName: parseValue(decodedParams.showSiteName, "boolean") ?? defaultProps.showSiteName
1017
1030
  };
1018
1031
  return new ImageResponse(
1019
- /* @__PURE__ */ React.createElement(Template, { ...templateProps }),
1032
+ /* @__PURE__ */ jsx2(Template, { ...templateProps }),
1020
1033
  {
1021
1034
  width: size.width,
1022
1035
  height: size.height,