@cntrl-site/sdk-nextjs 1.9.98 → 1.9.100-alpha.0

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 (7) hide show
  1. package/lib/components/Head.js +3 -3
  2. package/lib/components/items/ComponentItem/ComponentItem.js +27 -22
  3. package/lib/components/items/LinkWrapper.js +2 -2
  4. package/package.json +2 -2
  5. package/src/components/Head.tsx +6 -8
  6. package/src/components/items/ComponentItem/ComponentItem.tsx +56 -45
  7. package/src/components/items/LinkWrapper.tsx +4 -2
package/lib/components/Head.js CHANGED
@@ -15,7 +15,7 @@ const CNTRLHead = ({ meta, project, slug, siteUrl, fontsVault }) => {
15
15
  const parsedFonts = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
16
16
  const customFonts = project.fonts.custom;
17
17
  const htmlHead = (0, html_react_parser_1.default)(project.html.head);
18
- const ffGenerator = new sdk_1.FontFaceGenerator([...customFonts, ...fontsVault]);
18
+ const ffGenerator = new sdk_1.FontFaceGenerator([...fontsVault, ...customFonts]);
19
19
  const links = Object.values(parsedFonts).map((value) => {
20
20
  var _a, _b;
21
21
  if (!value)
@@ -26,9 +26,9 @@ const CNTRLHead = ({ meta, project, slug, siteUrl, fontsVault }) => {
26
26
  return null;
27
27
  return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, `link-${rel}-${href}`));
28
28
  });
29
- return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }), canonicalUrl && (0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: canonicalUrl }), canonicalUrl && (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: canonicalUrl }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
29
+ return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }), canonicalUrl && (0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: canonicalUrl }), canonicalUrl && (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: canonicalUrl }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
30
30
  __html: ffGenerator.generate()
31
- } })), links, htmlHead] }));
31
+ } }), links, htmlHead] }));
32
32
  };
33
33
  exports.CNTRLHead = CNTRLHead;
34
34
  function buildCanonicalUrl(host, slug) {
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -15,8 +15,9 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
15
15
  const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
16
16
  const useLayoutContext_1 = require("../../useLayoutContext");
17
17
  const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
18
+ const LinkWrapper_1 = require("../LinkWrapper");
18
19
  const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
19
- var _a, _b, _c, _d, _e, _f;
20
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
20
21
  const sdk = (0, useCntrlContext_1.useCntrlContext)();
21
22
  const { layouts } = sdk;
22
23
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -37,26 +38,30 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
37
38
  const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
38
39
  const commonParameters = item.commonParams.parameters;
39
40
  const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
40
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined
41
- ? { opacity: layout == null ? 0 : opacity }
42
- : layout == null ? { opacity: 0 } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
43
- itemId: item.id,
44
- submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
45
- }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
46
- .custom-component-${item.id} {
47
- width: 100%;
48
- height: 100%;
49
- pointer-events: auto;
50
- }
51
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
52
- return (`
53
- .custom-component-${item.id} {
54
- transform: rotate(${area.angle}deg);
55
- opacity: ${layoutParams.opacity};
56
- filter: blur(${layoutParams.blur}vw);
57
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
58
- }
59
- `);
60
- })}` })] }));
41
+ const hasLink = Boolean((_f = item.link) === null || _f === void 0 ? void 0 : _f.url);
42
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target,
43
+ // Let the component define its own hit area (e.g. rounded button),
44
+ // so empty space around it does not activate the link.
45
+ style: hasLink ? { pointerEvents: 'none' } : undefined, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined
46
+ ? { opacity: layout == null ? 0 : opacity }
47
+ : layout == null ? { opacity: 0 } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
48
+ itemId: item.id,
49
+ submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
50
+ }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
51
+ .custom-component-${item.id} {
52
+ width: 100%;
53
+ height: 100%;
54
+ pointer-events: ${hasLink ? 'none' : 'auto'};
55
+ }
56
+ ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
57
+ return (`
58
+ .custom-component-${item.id} {
59
+ transform: rotate(${area.angle}deg);
60
+ opacity: ${layoutParams.opacity};
61
+ filter: blur(${layoutParams.blur}vw);
62
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
63
+ }
64
+ `);
65
+ })}` })] }) }));
61
66
  };
62
67
  exports.ComponentItem = ComponentItem;
package/lib/components/items/LinkWrapper.js CHANGED
@@ -2,10 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LinkWrapper = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const LinkWrapper = ({ url, children, target }) => {
5
+ const LinkWrapper = ({ url, children, target, style }) => {
6
6
  const validUrl = url && buildValidUrl(url);
7
7
  const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
8
- return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
8
+ return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, style: style }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
9
9
  };
10
10
  exports.LinkWrapper = LinkWrapper;
11
11
  function buildValidUrl(url) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.98",
3
+ "version": "1.9.100-alpha.0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "dependencies": {
32
32
  "@antfu/eslint-config": "^3.8.0",
33
33
  "@cntrl-site/color": "^1.0.0",
34
- "@cntrl-site/components": "^1.0.46",
34
+ "@cntrl-site/components": "^1.0.48-alpha.0",
35
35
  "@cntrl-site/effects": "^1.4.2",
36
36
  "@cntrl-site/sdk": "^1.28.2",
37
37
  "@types/vimeo__player": "^2.18.0",
package/src/components/Head.tsx CHANGED
@@ -21,7 +21,7 @@ export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl, fontsVault
21
21
  };
22
22
  const customFonts = project.fonts.custom;
23
23
  const htmlHead = HTMLReactParser(project.html.head);
24
- const ffGenerator = new FontFaceGenerator([...customFonts, ...fontsVault]);
24
+ const ffGenerator = new FontFaceGenerator([...fontsVault, ...customFonts]);
25
25
  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
26
26
  if (!value) return null;
27
27
  const rel = value?.rel || value.props?.rel;
@@ -48,13 +48,11 @@ export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl, fontsVault
48
48
  <meta name="twitter:description" content={meta.description} />
49
49
  <meta name="generator" content="https://cntrl.site" />
50
50
  <link rel="icon" href={meta.favicon} />
51
- {customFonts.length > 0 && (
52
- <style
53
- dangerouslySetInnerHTML={{
54
- __html: ffGenerator.generate()
55
- }}
56
- />
57
- )}
51
+ <style
52
+ dangerouslySetInnerHTML={{
53
+ __html: ffGenerator.generate()
54
+ }}
55
+ />
58
56
  {links}
59
57
  {htmlHead}
60
58
 
package/src/components/items/ComponentItem/ComponentItem.tsx CHANGED
@@ -9,6 +9,7 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
9
9
  import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
10
10
  import { useLayoutContext } from '../../useLayoutContext';
11
11
  import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
12
+ import { LinkWrapper } from '../LinkWrapper';
12
13
 
13
14
  export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
14
15
  const sdk = useCntrlContext();
@@ -35,51 +36,61 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
35
36
  settings: { ...layoutParameters.settings, ...commonParameters?.settings }
36
37
  } : undefined;
37
38
 
39
+ const hasLink = Boolean(item.link?.url);
40
+
38
41
  return (
39
- <>
40
- <div
41
- className={`custom-component-${item.id}`}
42
- ref={setRef}
43
- style={{
44
- // preventing layout shift while supporting SSG for proper SEO
45
- ...(opacity !== undefined
46
- ? { opacity: layout == null ? 0 : opacity }
47
- : layout == null ? { opacity: 0 } : {}),
48
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
49
- ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
50
- willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
51
- transition: stateParams?.transition ?? 'none'
52
- }}
53
- >
54
- {parameters && Element && (
55
- <Element
56
- metadata={{
57
- itemId: item.id,
58
- submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
59
- }}
60
- portalId="component-portal"
61
- content={item.commonParams.content}
62
- {...parameters}
63
- />
64
- )}
65
- </div>
66
- <JSXStyle id={item.id}>{`
67
- .custom-component-${item.id} {
68
- width: 100%;
69
- height: 100%;
70
- pointer-events: auto;
71
- }
72
- ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
73
- return (`
74
- .custom-component-${item.id} {
75
- transform: rotate(${area.angle}deg);
76
- opacity: ${layoutParams.opacity};
77
- filter: blur(${layoutParams.blur}vw);
78
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
79
- }
80
- `);
81
- })}`}
82
- </JSXStyle>
83
- </>
42
+ <LinkWrapper
43
+ url={item.link?.url}
44
+ target={item.link?.target}
45
+ // Let the component define its own hit area (e.g. rounded button),
46
+ // so empty space around it does not activate the link.
47
+ style={hasLink ? { pointerEvents: 'none' } : undefined}
48
+ >
49
+ <>
50
+ <div
51
+ className={`custom-component-${item.id}`}
52
+ ref={setRef}
53
+ style={{
54
+ // preventing layout shift while supporting SSG for proper SEO
55
+ ...(opacity !== undefined
56
+ ? { opacity: layout == null ? 0 : opacity }
57
+ : layout == null ? { opacity: 0 } : {}),
58
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
59
+ ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
60
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
61
+ transition: stateParams?.transition ?? 'none'
62
+ }}
63
+ >
64
+ {parameters && Element && (
65
+ <Element
66
+ metadata={{
67
+ itemId: item.id,
68
+ submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
69
+ }}
70
+ portalId="component-portal"
71
+ content={item.commonParams.content}
72
+ {...parameters}
73
+ />
74
+ )}
75
+ </div>
76
+ <JSXStyle id={item.id}>{`
77
+ .custom-component-${item.id} {
78
+ width: 100%;
79
+ height: 100%;
80
+ pointer-events: ${hasLink ? 'none' : 'auto'};
81
+ }
82
+ ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
83
+ return (`
84
+ .custom-component-${item.id} {
85
+ transform: rotate(${area.angle}deg);
86
+ opacity: ${layoutParams.opacity};
87
+ filter: blur(${layoutParams.blur}vw);
88
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
89
+ }
90
+ `);
91
+ })}`}
92
+ </JSXStyle>
93
+ </>
94
+ </LinkWrapper>
84
95
  );
85
96
  };
package/src/components/items/LinkWrapper.tsx CHANGED
@@ -1,17 +1,19 @@
1
- import React, { ReactElement, ReactNode } from 'react';
1
+ import React, { CSSProperties, ReactElement, ReactNode } from 'react';
2
2
 
3
3
  interface Props {
4
4
  url?: string;
5
5
  children: ReactElement | ReactNode[];
6
6
  target?: string;
7
+ style?: CSSProperties;
7
8
  }
8
9
 
9
- export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
10
+ export const LinkWrapper: React.FC<Props> = ({ url, children, target, style }) => {
10
11
  const validUrl = url && buildValidUrl(url);
11
12
  const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
12
13
  return url ? (
13
14
  <a
14
15
  href={validUrl}
16
+ style={style}
15
17
  {...targetParams}
16
18
  >
17
19
  {children}