@cntrl-site/sdk-nextjs 0.2.8 → 0.2.10

package/lib/components/Article.js

@@ -2,18 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
 const Section_1 = require("./Section");
 const Item_1 = require("./Item");
 const Article = ({ article, layouts }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "article", children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, layouts: layouts, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { layouts: layouts, item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [article.color], ([color]) => (`
-          .article {
+       .article {
             position: relative;
             overflow: hidden;
-            background-color: ${color ? color : 'transparent'};
           }
-        `))}
       ` })] }));
 };
 exports.Article = Article;

package/lib/components/Head.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CNTRLHead = void 0;
+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 }) => {
+    const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
+    const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
+    const parsedFonts = {
+        ...(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);
+    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: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: ffGenerator.generate()
+                } })), Object.values(parsedFonts).map((value, i) => {
+                if (!value)
+                    return undefined;
+                const rel = value?.rel || value.props?.rel;
+                const href = value?.href || value.props?.href;
+                if (!rel || !href)
+                    return undefined;
+                return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, i));
+            }), htmlHead] }));
+};
+exports.CNTRLHead = CNTRLHead;

package/lib/components/Item.js

@@ -31,7 +31,7 @@ const Item = ({ item, layouts }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
-              top: ${area.top * 100}vw;
+              top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
@@ -42,10 +42,23 @@ const Item = ({ item, layouts }) => {
       ` })] }));
 };
 exports.Item = Item;
-const parseSizing = (sizing) => {
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+function parseSizing(sizing) {
     const axisSizing = sizing.split(' ');
     return {
         y: axisSizing[0],
         x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
     };
-};
+}

package/lib/components/Page.js

@@ -6,31 +6,11 @@ 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 Head_1 = require("./Head");
 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 parsedFonts = {
-        ...(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 afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
-    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: 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: ffGenerator.generate()
-                        } })), Object.values(parsedFonts).map((value, i) => {
-                        if (!value)
-                            return undefined;
-                        const rel = value?.rel || value.props?.rel;
-                        const href = value?.href || value.props?.href;
-                        if (!rel || !href)
-                            return undefined;
-                        return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, i));
-                    }), htmlHead] }), afterBodyOpen, (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, layouts: project.layouts }), beforeBodyClose] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, layouts: project.layouts }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/Section.js

@@ -21,10 +21,22 @@ const Section = ({ section, layouts, children }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
-            height: ${height * 100}vw;
+            height: ${getSectionHeight(height)};
             position: relative;
           }`))}
+      ${(0, sdk_1.getLayoutStyles)(layouts, [section.color], ([color]) => (`
+         .section-${section.id} {
+            background-color: ${color ? color : 'transparent'};
+          }`))}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;
+function getSectionHeight(heightData) {
+    const { units, vhUnits, mode } = heightData;
+    if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
+        return `${vhUnits}vh`;
+    if (mode === sdk_1.SectionHeightMode.ControlUnits)
+        return `${units * 100}vw`;
+    return '0';
+}

package/lib/index.js

@@ -14,13 +14,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomItems = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
+exports.CustomItems = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
 const defaultContext_1 = require("./provider/defaultContext");
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
 var Page_1 = require("./components/Page");
 Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
+var Head_1 = require("./components/Head");
+Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return Head_1.CNTRLHead; } });
 var Article_1 = require("./components/Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
 var Section_1 = require("./components/Section");

package/package.json

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

package/src/components/Article.tsx

@@ -21,13 +21,10 @@ export const Article: FC<Props> = ({ article, layouts }) => {
         ))}
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [article.color], ([color]) => (`
-          .article {
+       .article {
             position: relative;
             overflow: hidden;
-            background-color: ${color ? color : 'transparent'};
           }
-        `))}
       `}</style>
     </>
   );

package/src/components/Head.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import HTMLReactParser, { domToReact } from 'html-react-parser';
+import Head from 'next/head';
+import { FontFaceGenerator, TMeta, TProject } from '@cntrl-site/sdk';
+
+interface Props {
+  project: TProject;
+  meta: TMeta;
+}
+
+export const CNTRLHead: FC<Props> = ({ meta, project }) => {
+  const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
+  const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
+  const parsedFonts = {
+    ...(typeof googleFonts === 'object' ? googleFonts : {}),
+    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
+  };
+  const customFonts = project.fonts.custom;
+  const htmlHead = HTMLReactParser(project.html.head);
+  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} />
+      {customFonts.length > 0 && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: ffGenerator.generate()
+          }}
+        />
+      )}
+      {Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
+        if (!value) return undefined;
+        const rel = value?.rel || value.props?.rel;
+        const href = value?.href || value.props?.href;
+        if (!rel || !href) return undefined;
+        return (
+          <link key={i} rel={rel} href={href} />
+        );
+      })}
+      {htmlHead}
+
+    </Head>
+  );
+};

package/src/components/Item.tsx

@@ -4,7 +4,8 @@ import {
   ArticleItemType,
   ArticleItemSizingType as SizingType,
   TArticleItemAny,
-  TLayout
+  TLayout,
+  AnchorSide
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -47,7 +48,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
         ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
-              top: ${area.top * 100}vw;
+              top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'auto'};
               height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'auto'};
@@ -60,13 +61,26 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
   );
 };
 
-const parseSizing = (sizing: string): Axis => {
+function getItemTopStyle(top: number, anchorSide: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}
+
+function parseSizing(sizing: string): Axis {
   const axisSizing = sizing.split(' ');
   return {
     y: axisSizing[0],
     x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
   } as Axis;
-};
+}
 
 interface Axis {
   x: SizingType;

package/src/components/Page.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
-import HTMLReactParser, { domToReact } from 'html-react-parser';
-import { TArticle, TProject, TMeta, FontFaceGenerator } from '@cntrl-site/sdk';
-import Head from 'next/head';
+import HTMLReactParser from 'html-react-parser';
+import { TArticle, TProject, TMeta } from '@cntrl-site/sdk';
 import { Article } from './Article';
+import { CNTRLHead } from './Head';
 
 interface Props {
   article: TArticle;
@@ -11,44 +11,11 @@ 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 parsedFonts = {
-    ...(typeof googleFonts === 'object' ? googleFonts : {}),
-    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
-  };
-  const customFonts = project.fonts.custom;
-  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} />
-        {customFonts.length > 0 && (
-          <style
-            dangerouslySetInnerHTML={{
-              __html: ffGenerator.generate()
-            }}
-          />
-        )}
-        {Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
-          if (!value) return undefined;
-          const rel = value?.rel || value.props?.rel;
-          const href = value?.href || value.props?.href;
-          if (!rel || !href) return undefined;
-          return (
-            <link key={i} rel={rel} href={href} />
-          );
-        })}
-        {htmlHead}
-
-      </Head>
+      <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
       <Article article={article} layouts={project.layouts} />
       {beforeBodyClose}

package/src/components/Section.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -34,13 +34,27 @@ export const Section: FC<Props> = ({ section, layouts, children }) => {
       ${
         getLayoutStyles(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
-            height: ${height * 100}vw;
+            height: ${getSectionHeight(height)};
             position: relative;
           }`
         ))
       }
+      ${
+        getLayoutStyles(layouts, [section.color], ([color]) => (`
+         .section-${section.id} {
+            background-color: ${color ? color : 'transparent'};
+          }`
+        ))
+      }
       ${getSectionVisibilityStyles()}
     `}</style>
     </>
   );
 };
+
+function getSectionHeight(heightData: TSectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/index.ts

@@ -4,6 +4,7 @@ export * from '@cntrl-site/sdk';
 
 export { RichTextConverter } from './utils/RichTextConverter';
 export { Page } from './components/Page';
+export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
 export { Section } from './components/Section';
 export { Item } from './components/Item';

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>