@cntrl-site/sdk-nextjs 0.0.13 → 0.1.3

package/lib/components/Item.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@cntrl-site/core");
 const sdk_1 = require("@cntrl-site/sdk");
 const RectangleItem_1 = require("./items/RectangleItem");
 const ImageItem_1 = require("./items/ImageItem");
 const VideoItem_1 = require("./items/VideoItem");
 const RichTextItem_1 = require("./items/RichTextItem");
 const itemsMap = {
-    [core_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
-    [core_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
-    [core_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
-    [core_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem
+    [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
+    [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
+    [sdk_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
+    [sdk_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem
 };
 const noop = () => null;
 const Item = ({ item, layouts }) => {
@@ -28,8 +27,8 @@ const Item = ({ item, layouts }) => {
               position: absolute;
               top: ${area.top * 100}vw;
               left: ${layoutParams?.fullwidth ? 0 : area.left * 100}vw;
-              width: ${layoutParams?.fullwidth ? '100vw' : sizingAxis.x === core_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
-              height: ${sizingAxis.y === core_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
+              width: ${layoutParams?.fullwidth ? '100vw' : sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
+              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
               z-index: ${area.zIndex};
               transform: rotate(${area.angle}deg);
             }

package/lib/components/LayoutStyle.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@cntrl-site/core");
+const sdk_1 = require("@cntrl-site/sdk");
 // @ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);
     return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, core_1.getLayoutMediaQuery)(layoutId, layouts)} {
+      ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
         ${children?.(layout)}
       }
     ` }));

package/lib/components/Page.js

@@ -6,11 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Page = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const sdk_1 = require("@cntrl-site/sdk");
 const head_1 = __importDefault(require("next/head"));
 const Article_1 = require("./Article");
 const Page = ({ article, project, meta }) => {
     const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
     const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
+    const getPageMeta = (projectMeta, pageMeta) => {
+        return {
+            title: pageMeta.title ? pageMeta.title : projectMeta.title,
+            description: pageMeta.description ? pageMeta.description : projectMeta.description,
+            keywords: pageMeta.keywords ? pageMeta.keywords : projectMeta.keywords,
+            opengraphThumbnail: pageMeta.opengraphThumbnail ? pageMeta.opengraphThumbnail : projectMeta.opengraphThumbnail,
+            favicon: projectMeta.favicon
+        };
+    };
+    const priorityMeta = getPageMeta(project.meta, meta);
     const parsedFonts = {
         ...(typeof googleFonts === 'object' ? googleFonts : {}),
         ...(typeof adobeFonts === 'object' ? adobeFonts : {})
@@ -19,14 +30,9 @@ const Page = ({ article, project, meta }) => {
     const htmlHead = (0, html_react_parser_1.default)(project.html.head);
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
-                            __html: customFonts.map((font) => (`
-                @font-face {
-                  font-family: ${font.name};
-                  font-weight: ${font.weight};
-                  src: ${font.files.map(file => `url('${file.url}') format('${file.type}')`).join(', ')};
-                }
-              `)).join('\n')
+    const ffGenerator = new sdk_1.FontFaceGenerator(customFonts);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: priorityMeta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: priorityMeta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: priorityMeta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: priorityMeta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: priorityMeta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                            __html: ffGenerator.generate()
                         } })), Object.values(parsedFonts).map((value, i) => {
                         if (!value)
                             return undefined;

package/lib/components/items/RectangleItem.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper_1 = require("../LinkWrapper");
 const sdk_1 = require("@cntrl-site/sdk");
+const LinkWrapper_1 = require("../LinkWrapper");
 const RectangleItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}` }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
          .rectangle-${item.id} {

package/lib/index.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
-__exportStar(require("@cntrl-site/core"), exports);
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });

package/lib/utils/RichTextConverter.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextConverter = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@cntrl-site/core");
+const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../components/LinkWrapper");
 exports.FontStyles = {
     'normal': {},
@@ -19,7 +19,7 @@ class RichTextConverter {
             return rec;
         }, {});
         let currentLineHeight = layouts.reduce((rec, layout) => {
-            const styles = (0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, layout.id)?.styles;
+            const styles = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, layout.id)?.styles;
             rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
             return rec;
         }, {});
@@ -39,7 +39,7 @@ class RichTextConverter {
                 continue;
             }
             const newStylesGroup = layouts.map(({ id: layoutId }) => {
-                const params = (0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, layoutId);
+                const params = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, layoutId);
                 const styles = params.styles
                     .filter(s => s.start >= block.start && s.end <= block.end)
                     .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
@@ -56,7 +56,7 @@ class RichTextConverter {
                     styleRules[l.id].push(`
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${(0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign};
+              text-align: ${(0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign};
               line-height: 0;
             }
           `);
@@ -112,7 +112,7 @@ class RichTextConverter {
             }
         }
         const styles = layouts.map(l => `
-      ${(0, core_1.getLayoutMediaQuery)(l.id, layouts)} {
+      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
         ${styleRules[l.id].join('\n')}
       }
     `).join('\n');
@@ -192,8 +192,8 @@ class RichTextConverter {
             'LINEHEIGHT': { 'line-height': `${parseFloat(value) * 100}vw` },
             'LETTERSPACING': { 'letter-spacing': `${parseFloat(value) * 100}vw` },
             'WORDSPACING': { 'word-spacing': `${parseFloat(value) * 100}vw` },
-            'TEXTTRANSFORM': value ? { 'text-transform': value } : { 'text-transform': core_1.TextTransform.None },
-            'VERTICALALIGN': value ? { 'vertical-align': value } : { 'vertical-align': core_1.VerticalAlign.Unset },
+            'TEXTTRANSFORM': value ? { 'text-transform': value } : { 'text-transform': sdk_1.TextTransform.None },
+            'VERTICALALIGN': value ? { 'vertical-align': value } : { 'vertical-align': sdk_1.VerticalAlign.Unset },
             'TEXTDECORATION': { 'text-decoration': value }
         };
         const css = map[name];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.0.13",
+  "version": "0.1.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,8 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/core": "^1.0.9",
-    "@cntrl-site/sdk": "^0.0.7",
+    "@cntrl-site/sdk": "^0.2.2",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/components/Article.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TArticle, TLayout } from '@cntrl-site/core';
+import { TArticle, TLayout } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 

package/src/components/Item.tsx

@@ -1,11 +1,11 @@
 import { ComponentType, FC } from 'react';
 import {
+  getLayoutStyles,
   ArticleItemType,
   ArticleItemSizingType as SizingType,
   TArticleItemAny,
   TLayout
-} from '@cntrl-site/core';
-import { getLayoutStyles } from '@cntrl-site/sdk';
+} from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
 import { VideoItem } from './items/VideoItem';

package/src/components/LayoutStyle.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { getLayoutMediaQuery, TLayout } from '@cntrl-site/core';
+import { getLayoutMediaQuery, TLayout } from '@cntrl-site/sdk';
 // @ts-ignore
 import JSXStyle from 'styled-jsx/style';
 

package/src/components/Page.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import HTMLReactParser, { domToReact } from 'html-react-parser';
-import { TArticle, TProject, TMeta } from '@cntrl-site/core';
+import { TArticle, TProject, TMeta, FontFaceGenerator, TPageMeta } from '@cntrl-site/sdk';
 import Head from 'next/head';
 import { Article } from './Article';
 
@@ -13,6 +13,17 @@ interface Props {
 export const Page: FC<Props> = ({ article, project, meta }) => {
   const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
   const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
+
+  const getPageMeta = (projectMeta: TMeta, pageMeta: TPageMeta): TMeta => {
+    return {
+      title: pageMeta.title ? pageMeta.title : projectMeta.title,
+      description: pageMeta.description ? pageMeta.description : projectMeta.description,
+      keywords: pageMeta.keywords ? pageMeta.keywords : projectMeta.keywords,
+      opengraphThumbnail: pageMeta.opengraphThumbnail ? pageMeta.opengraphThumbnail : projectMeta.opengraphThumbnail,
+      favicon: projectMeta.favicon
+    };
+  };
+  const priorityMeta = getPageMeta(project.meta, meta);
   const parsedFonts = {
     ...(typeof googleFonts === 'object' ? googleFonts : {}),
     ...(typeof adobeFonts === 'object' ? adobeFonts : {})
@@ -21,26 +32,19 @@ export const Page: FC<Props> = ({ article, project, meta }) => {
   const htmlHead = HTMLReactParser(project.html.head);
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const ffGenerator = new FontFaceGenerator(customFonts);
   return (
     <>
       <Head>
-        <title>{meta.title}</title>
-        <meta name="description" content={meta.description} />
-        <meta name="keywords" content={meta.keywords} />
-        <meta property="og:image" content={meta.opengraphThumbnail} />
-        <link rel="icon" href={meta.favicon} />
+        <title>{priorityMeta.title}</title>
+        <meta name="description" content={priorityMeta.description} />
+        <meta name="keywords" content={priorityMeta.keywords} />
+        <meta property="og:image" content={priorityMeta.opengraphThumbnail} />
+        <link rel="icon" href={priorityMeta.favicon} />
         {customFonts.length > 0 && (
           <style
             dangerouslySetInnerHTML={{
-              __html: customFonts.map((font) => (
-                `
-                @font-face {
-                  font-family: ${font.name};
-                  font-weight: ${font.weight};
-                  src: ${font.files.map(file => `url('${file.url}') format('${file.type}')`).join(', ')};
-                }
-              `
-              )).join('\n')
+              __html: ffGenerator.generate()
             }}
           />
         )}

package/src/components/Section.tsx

@@ -1,6 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { TLayout, TArticleSection } from '@cntrl-site/core';
-import { getLayoutStyles } from '@cntrl-site/sdk';
+import { getLayoutStyles, TLayout, TArticleSection } from '@cntrl-site/sdk';
 
 type SectionChild = ReactElement<any, any>;
 

package/src/components/items/ImageItem.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { TImageItem } from '@cntrl-site/core';
-import { getLayoutStyles } from '@cntrl-site/sdk';
+import { getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 

package/src/components/items/RectangleItem.tsx

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { TRectangleItem } from '@cntrl-site/core';
+import { TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts }) => (
   <LinkWrapper url={item.link?.url}>

package/src/components/items/RichTextItem.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TRichTextItem } from '@cntrl-site/core';
+import { TRichTextItem } from '@cntrl-site/sdk';
 //@ts-ignore
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';

package/src/components/items/VideoItem.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TVideoItem } from '@cntrl-site/core';
+import { TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getLayoutStyles } from '@cntrl-site/sdk';

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from '@cntrl-site/core';
 export * from '@cntrl-site/sdk';
 
 export { RichTextConverter } from './utils/RichTextConverter';

package/src/utils/RichTextConverter.tsx

@@ -7,7 +7,7 @@ import {
   VerticalAlign,
   getClosestLayoutValue,
   getLayoutMediaQuery
-} from '@cntrl-site/core';
+} from '@cntrl-site/sdk';
 import { LinkWrapper } from '../components/LinkWrapper';
 
 interface StyleGroup {