@cntrl-site/sdk-nextjs 1.9.93-3 → 1.9.94-0

package/lib/components/Head.js

@@ -8,14 +8,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const head_1 = __importDefault(require("next/head"));
 const sdk_1 = require("@cntrl-site/sdk");
-const CNTRLHead = ({ meta, project, slug, siteUrl }) => {
+const CNTRLHead = ({ meta, project, slug, siteUrl, fontsVault }) => {
     const canonicalUrl = buildCanonicalUrl(siteUrl !== null && siteUrl !== void 0 ? siteUrl : project.primaryDomain, slug);
     const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
     const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
     const parsedFonts = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
     const customFonts = project.fonts.custom;
     const htmlHead = (0, html_react_parser_1.default)(project.html.head);
-    const ffGenerator = new sdk_1.FontFaceGenerator(customFonts);
+    const ffGenerator = new sdk_1.FontFaceGenerator([...customFonts, ...fontsVault]);
     const links = Object.values(parsedFonts).map((value) => {
         var _a, _b;
         if (!value)

package/lib/components/Page.js

@@ -13,13 +13,13 @@ const Head_1 = require("./Head");
 const Keyframes_1 = require("../provider/Keyframes");
 const ItemGeometryContext_1 = require("../ItemGeometry/ItemGeometryContext");
 const ItemGeometryService_1 = require("../ItemGeometry/ItemGeometryService");
-const Page = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
+const Page = ({ article, project, meta, keyframes, sectionData, siteUrl, fontsVault }) => {
     var _a;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     const itemGeometryService = (0, react_1.useMemo)(() => new ItemGeometryService_1.ItemGeometryService(), []);
     const currentSlug = (_a = project.pages.find(p => p.articleId === article.id)) === null || _a === void 0 ? void 0 : _a.slug;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta, slug: currentSlug, siteUrl: siteUrl }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta, slug: currentSlug, siteUrl: siteUrl, fontsVault: fontsVault }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -15,9 +15,8 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
-const LinkWrapper_1 = require("../LinkWrapper");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -38,30 +37,26 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
     const commonParameters = item.commonParams.parameters;
     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;
-    const hasLink = Boolean((_f = item.link) === null || _f === void 0 ? void 0 : _f.url);
-    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, 
-        // Let the component define its own hit area (e.g. rounded button),
-        // so empty space around it does not activate the link.
-        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
-                        ? { opacity: layout == null ? 0 : opacity }
-                        : 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: {
-                            itemId: item.id,
-                            submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
-                        }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
-        .custom-component-${item.id} {
-          width: 100%;
-          height: 100%;
-          pointer-events: ${hasLink ? 'none' : 'auto'};
-        }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              opacity: ${layoutParams.opacity};
-              filter: blur(${layoutParams.blur}vw);
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-          `);
-                    })}` })] }) }));
+    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
+                    ? { opacity: layout == null ? 0 : opacity }
+                    : 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: {
+                        itemId: item.id,
+                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
+                    }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+                })}` })] }));
 };
 exports.ComponentItem = ComponentItem;

package/lib/components/items/LinkWrapper.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children, target, style }) => {
+const LinkWrapper = ({ url, children, target }) => {
     const validUrl = url && buildValidUrl(url);
     const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
-    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 }));
+    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 }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.93-3",
+  "version": "1.9.94-0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.43-alpha.3",
+    "@cntrl-site/components": "^1.0.40",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.0",
+    "@cntrl-site/sdk": "1.28.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Head.tsx

@@ -1,16 +1,17 @@
 import React, { FC } from 'react';
 import HTMLReactParser, { domToReact } from 'html-react-parser';
 import Head from 'next/head';
-import { FontFaceGenerator, Meta, Project } from '@cntrl-site/sdk';
+import { FontFaceGenerator, Meta, Project, FontVault } from '@cntrl-site/sdk';
 
 interface Props {
   project: Project;
   meta: Meta;
   slug?: string;
   siteUrl?: string;
+  fontsVault: FontVault[];
 }
 
-export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl }) => {
+export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl, fontsVault }) => {
   const canonicalUrl = buildCanonicalUrl(siteUrl ?? project.primaryDomain, slug);
   const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
   const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
@@ -20,7 +21,7 @@ export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl }) => {
   };
   const customFonts = project.fonts.custom;
   const htmlHead = HTMLReactParser(project.html.head);
-  const ffGenerator = new FontFaceGenerator(customFonts);
+  const ffGenerator = new FontFaceGenerator([...customFonts, ...fontsVault]);
   const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
     if (!value) return null;
     const rel = value?.rel || value.props?.rel;

package/src/components/Page.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import HTMLReactParser from 'html-react-parser';
-import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
+import { Article as TArticle, Project, Meta, KeyframeAny, FontVault } from '@cntrl-site/sdk';
 import { Article } from './Article';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
@@ -17,6 +17,7 @@ export interface PageProps {
   article: TArticle;
   project: Project;
   meta: Meta;
+  fontsVault: FontVault[];
   keyframes: KeyframeAny[];
   sectionData: Record<SectionName, any>;
   publicApiBase?: string;
@@ -24,7 +25,7 @@ export interface PageProps {
   siteUrl?: string;
 }
 
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl, fontsVault }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
@@ -32,7 +33,7 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes, section
   const currentSlug = project.pages.find(p => p.articleId === article.id)?.slug;
   return (
     <>
-      <CNTRLHead project={project} meta={meta} slug={currentSlug} siteUrl={siteUrl} />
+      <CNTRLHead project={project} meta={meta} slug={currentSlug} siteUrl={siteUrl} fontsVault={fontsVault} />
       {afterBodyOpen}
       <ItemGeometryContext.Provider value={itemGeometryService}>
         <KeyframesContext.Provider value={keyframesRepo}>

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -9,7 +9,6 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-import { LinkWrapper } from '../LinkWrapper';
 
 export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const sdk = useCntrlContext();
@@ -36,61 +35,51 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
     settings: { ...layoutParameters.settings, ...commonParameters?.settings }
   } : undefined;
 
-  const hasLink = Boolean(item.link?.url);
-
   return (
-    <LinkWrapper
-      url={item.link?.url}
-      target={item.link?.target}
-      // Let the component define its own hit area (e.g. rounded button),
-      // so empty space around it does not activate the link.
-      style={hasLink ? { pointerEvents: 'none' } : undefined}
-    >
-      <>
-        <div
-          className={`custom-component-${item.id}`}
-          ref={setRef}
-          style={{
-            // preventing layout shift while supporting SSG for proper SEO
-            ...(opacity !== undefined
-              ? { opacity: layout == null ? 0 : opacity }
-              : 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: stateParams?.transition ?? 'none'
-          }}
-        >
-          {parameters && Element && (
-            <Element
-              metadata={{
-                itemId: item.id,
-                submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
-              }}
-              portalId="component-portal"
-              content={item.commonParams.content}
-              {...parameters}
-            />
-          )}
-        </div>
-        <JSXStyle id={item.id}>{`
-        .custom-component-${item.id} {
-          width: 100%;
-          height: 100%;
-          pointer-events: ${hasLink ? 'none' : 'auto'};
-        }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-        return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              opacity: ${layoutParams.opacity};
-              filter: blur(${layoutParams.blur}vw);
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-          `);
-      })}`}
-        </JSXStyle>
-      </>
-    </LinkWrapper>
+    <>
+      <div
+        className={`custom-component-${item.id}`}
+        ref={setRef}
+        style={{
+          // preventing layout shift while supporting SSG for proper SEO
+          ...(opacity !== undefined
+            ? { opacity: layout == null ? 0 : opacity }
+            : 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: stateParams?.transition ?? 'none'
+        }}
+      >
+        {parameters && Element && (
+          <Element
+            metadata={{
+              itemId: item.id,
+              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
+            }}
+            portalId="component-portal"
+            content={item.commonParams.content}
+            {...parameters}
+          />
+        )}
+      </div>
+      <JSXStyle id={item.id}>{`
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+      return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+    })}`}
+      </JSXStyle>
+    </>
   );
 };

package/src/components/items/LinkWrapper.tsx

@@ -1,19 +1,17 @@
-import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 interface Props {
   url?: string;
   children: ReactElement | ReactNode[];
   target?: string;
-  style?: CSSProperties;
 }
 
-export const LinkWrapper: React.FC<Props> = ({ url, children, target, style }) => {
+export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
   const validUrl = url && buildValidUrl(url);
   const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
   return url ? (
     <a
       href={validUrl}
-      style={style}
       {...targetParams}
     >
       {children}