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