@cntrl-site/sdk-nextjs 0.0.11 → 0.1.1

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/LinkWrapper.js

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children }) => (url ? (0, jsx_runtime_1.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: children }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+const LinkWrapper = ({ url, children }) => {
+    return url ? ((0, jsx_runtime_1.jsx)("a", { href: !url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('/') ? `//${url}` : url, target: url.startsWith('/') ? '_self' : '_blank', rel: "noreferrer", children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+};
 exports.LinkWrapper = LinkWrapper;

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,8 @@
 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': {},
     'bold': { 'font-weight': 'bold' },
@@ -18,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;
         }, {});
@@ -38,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 }));
@@ -55,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;
             }
           `);
@@ -81,7 +82,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)("a", { target: "_blank", href: entity.link, rel: "noreferrer", children: entityKids }, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, children: entityKids }, entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -111,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');
@@ -184,15 +185,15 @@ class RichTextConverter {
         const { value, name } = draftStyle;
         const map = {
             'COLOR': { 'color': value },
-            'TYPEFACE': { 'font-family': `"${value}"` },
+            'TYPEFACE': { 'font-family': `${value}` },
             'FONTSTYLE': value ? { ...exports.FontStyles[value] } : {},
             'FONTWEIGHT': { 'font-weight': value },
             'FONTSIZE': { 'font-size': `${parseFloat(value) * 100}vw` },
             '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.11",
+  "version": "0.1.1",
   "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.8",
-    "@cntrl-site/sdk": "^0.0.3",
+    "@cntrl-site/sdk": "^0.2.0",
     "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/LinkWrapper.tsx

@@ -1,9 +1,22 @@
-import React, { ReactElement } from 'react';
+import React, { MouseEvent, ReactElement, ReactNode, useEffect } from 'react';
 
 interface Props {
   url?: string;
-  children: ReactElement;
+  children: ReactElement | ReactNode[];
 }
 
-export const LinkWrapper: React.FC<Props> = ({ url, children }) => (
-    url ? <a href={url} target="_blank" rel="noreferrer">{children}</a> : <>{children}</>);
+export const LinkWrapper: React.FC<Props> = ({ url, children }) => {
+  return url ? (
+    <a
+      href={!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('/') ? `//${url}`: url}
+      target={url.startsWith('/') ? '_self' : '_blank'}
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  ) : (
+    <>{children}</>
+  );
+};
+
+

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,8 @@ import {
   VerticalAlign,
   getClosestLayoutValue,
   getLayoutMediaQuery
-} from '@cntrl-site/core';
+} from '@cntrl-site/sdk';
+import { LinkWrapper } from '../components/LinkWrapper';
 
 interface StyleGroup {
   start: number;
@@ -110,7 +111,7 @@ export class RichTextConverter {
             offset = entity.end;
           }
           if (entity.link) {
-            kids.push(<a key={entity.start} target="_blank" href={entity.link} rel="noreferrer">{entityKids}</a>);
+            kids.push(<LinkWrapper key={entity.start} url={entity.link} >{entityKids}</LinkWrapper>);
             continue;
           }
           kids.push(...entityKids);
@@ -216,7 +217,7 @@ export class RichTextConverter {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       'COLOR': { 'color': value },
-      'TYPEFACE': { 'font-family': `"${value}"` },
+      'TYPEFACE': { 'font-family': `${value}` },
       'FONTSTYLE': value ? { ...FontStyles[value] } : {},
       'FONTWEIGHT': { 'font-weight': value },
       'FONTSIZE': { 'font-size': `${parseFloat(value!) * 100}vw` },