@cntrl-site/sdk 1.0.0 → 1.1.1

package/.env.local

@@ -0,0 +1 @@
+CNTRL_API_URL=https://01GJ2SPNXG3V5P35ZA35YM1JTW:68e1bacad1b3adb6cb8be99ca7167c2b@preview.cntrl.site

package/cntrl.scss

@@ -0,0 +1,66 @@
+// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
+// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
+// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
+@use "sass:map";
+
+$__CNTRL_LAYOUT_WIDTH__: 375;
+
+$layout: (
+
+    mobile: (
+        start: 0,
+        end: 749,
+        exemplary: 375,
+        isFirst: true,
+        isLast: false
+    ),
+
+    tablet: (
+        start: 750,
+        end: 1023,
+        exemplary: 768,
+        isFirst: false,
+        isLast: false
+    ),
+
+    desktop: (
+        start: 1024,
+        end: 9007199254740991,
+        exemplary: 1440,
+        isFirst: false,
+        isLast: true
+    ),
+
+);
+
+@function size($value) {
+    @return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
+}
+
+@mixin for($name) {
+    $start: map.get(map.get($layout, $name), "start");
+    $end: map.get(map.get($layout, $name), "end");
+    $isFirst: map.get(map.get($layout, $name), "isFirst");
+    $isLast: map.get(map.get($layout, $name), "isLast");
+    $exemplary: map.get(map.get($layout, $name), "exemplary");
+    $__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
+
+    @if $isFirst == true and $isLast == true {
+        @content;
+    } @else if $isFirst == true {
+        @media (max-width: #{$end}px) {
+            @content;
+        }
+    } @else if $isLast == true {
+        @media (min-width: #{$start}px) {
+            @content;
+        }
+    } @else {
+        @media (min-width: #{$start}px) and (max-width: #{$end}px) {
+            @content;
+        }
+    }
+
+    // reset global variable back to first layout's exemplary (mobile-first)
+    $__CNTRL_LAYOUT_WIDTH__: 375 !global;
+}

package/lib/Client/Client.js

@@ -18,28 +18,50 @@ class Client {
             throw new Error('API key is missing in the URL.');
         }
     }
-    async getProject() {
+    static getPageMeta(projectMeta, pageMeta) {
+        return pageMeta.enabled ? {
+            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
+        } : projectMeta;
+    }
+    async getPageData(pageSlug) {
         try {
-            const response = await this.fetchProject();
-            const data = await response.json();
-            const project = core_1.ProjectSchema.parse(data);
-            return project;
+            const project = await this.fetchProject();
+            const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
+            const [{ article, keyframes }, typePresets] = await Promise.all([
+                this.fetchArticle(articleId),
+                this.fetchTypePresets()
+            ]);
+            const page = project.pages.find(page => page.slug === pageSlug);
+            const meta = Client.getPageMeta(project.meta, page?.meta);
+            return {
+                project,
+                typePresets,
+                article,
+                keyframes,
+                meta
+            };
         }
         catch (e) {
             throw e;
         }
     }
-    async getPageArticle(pageSlug) {
+    async getProjectPagesPaths() {
         try {
-            const projectResponse = await this.fetchProject();
-            const data = await projectResponse.json();
-            const project = core_1.ProjectSchema.parse(data);
-            const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
-            const articleResponse = await this.fetchArticle(articleId);
-            const articleData = await articleResponse.json();
-            const article = core_1.ArticleSchema.parse(articleData.article);
-            const keyframes = core_1.KeyframesSchema.parse(articleData.keyframes);
-            return { article, keyframes };
+            const { pages } = await this.fetchProject();
+            return pages.map(p => p.slug);
+        }
+        catch (e) {
+            throw e;
+        }
+    }
+    async getLayouts() {
+        try {
+            const { layouts } = await this.fetchProject();
+            return layouts;
         }
         catch (e) {
             throw e;
@@ -47,18 +69,7 @@ class Client {
     }
     async getTypePresets() {
         const response = await this.fetchTypePresets();
-        const data = await response.json();
-        const typePresets = core_1.TypePresetsSchema.parse(data);
-        return typePresets;
-    }
-    static getPageMeta(projectMeta, pageMeta) {
-        return pageMeta.enabled ? {
-            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
-        } : projectMeta;
+        return response;
     }
     async fetchProject() {
         const { username: projectId, password: apiKey, origin } = this.url;
@@ -71,7 +82,9 @@ class Client {
         if (!response.ok) {
             throw new Error(`Failed to fetch project with id #${projectId}: ${response.statusText}`);
         }
-        return response;
+        const data = await response.json();
+        const project = core_1.ProjectSchema.parse(data);
+        return project;
     }
     async fetchArticle(articleId) {
         const { username: projectId, password: apiKey, origin } = this.url;
@@ -84,7 +97,10 @@ class Client {
         if (!response.ok) {
             throw new Error(`Failed to fetch article with id #${articleId}: ${response.statusText}`);
         }
-        return response;
+        const data = await response.json();
+        const article = core_1.ArticleSchema.parse(data.article);
+        const keyframes = core_1.KeyframesSchema.parse(data.keyframes);
+        return { article, keyframes };
     }
     async fetchTypePresets() {
         const { username: projectId, password: apiKey, origin } = this.url;
@@ -97,7 +113,9 @@ class Client {
         if (!response.ok) {
             throw new Error(`Failed to fetch type presets for the project with id #${projectId}: ${response.statusText}`);
         }
-        return response;
+        const data = await response.json();
+        const typePresets = core_1.TypePresetsSchema.parse(data);
+        return typePresets;
     }
     findArticleIdByPageSlug(slug, pages) {
         const { username: projectId } = this.url;

package/lib/cli.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const ejs_1 = __importDefault(require("ejs"));
+const dotenv_1 = require("dotenv");
+const commander_1 = require("commander");
+const Client_1 = require("./Client/Client");
+commander_1.program
+    .command('generate-layouts')
+    .option('-o, --output <outputFilePath>', 'Output file path', 'cntrl.scss')
+    .option('-e, --env <envFilename>', 'Name of the .env file', '.env.local')
+    .action(async (options) => {
+    try {
+        (0, dotenv_1.config)({ path: options.env });
+        const templateFilePath = path_1.default.resolve(__dirname, '../resources/template.scss.ejs');
+        const scssTemplate = fs_1.default.readFileSync(templateFilePath, 'utf-8');
+        const apiUrl = process.env.CNTRL_API_URL;
+        if (!apiUrl) {
+            throw new Error('Environment variable "CNTRL_API_URL" must be set.');
+        }
+        const client = new Client_1.Client(apiUrl);
+        const layouts = await client.getLayouts();
+        const ranges = convertLayouts(layouts);
+        const compiledTemplate = ejs_1.default.compile(scssTemplate);
+        const renderedTemplate = compiledTemplate({ ranges });
+        const outputFilePath = path_1.default.resolve(process.cwd(), options.output);
+        fs_1.default.writeFileSync(outputFilePath, renderedTemplate);
+        console.log(`Generated .scss file at ${outputFilePath}`);
+    }
+    catch (error) {
+        console.error('An error occurred:', error);
+        process.exit(1);
+    }
+});
+function convertLayouts(layouts, maxLayoutWidth = Number.MAX_SAFE_INTEGER) {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    const mapped = sorted.map((layout, i, ls) => {
+        const next = ls[i + 1];
+        return {
+            start: layout.startsWith,
+            end: next ? next.startsWith - 1 : maxLayoutWidth,
+            exemplary: layout.exemplary,
+            name: layout.title,
+            isFirst: i === 0,
+            isLast: !next
+        };
+    });
+    return mapped;
+}
+commander_1.program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -10,6 +10,9 @@
     "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "NODE_ENV=production npm run build"
   },
+  "bin": {
+    "cntrl-sdk": "lib/cli.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cntrl-site/sdk.git"
@@ -24,9 +27,14 @@
     "lib": "lib"
   },
   "dependencies": {
-    "@cntrl-site/core": "^1.22.0",
+    "@cntrl-site/core": "^1.22.3",
+    "@types/ejs": "^3.1.2",
     "@types/isomorphic-fetch": "^0.0.36",
+    "commander": "^10.0.1",
+    "dotenv": "^16.1.3",
+    "ejs": "^3.1.9",
     "isomorphic-fetch": "^3.0.0",
+    "ts-node": "^10.9.1",
     "url": "^0.11.0"
   },
   "devDependencies": {

package/resources/template.scss.ejs

@@ -0,0 +1,50 @@
+// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
+// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
+// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
+@use "sass:map";
+
+$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %>;
+
+$layout: (
+<% ranges.forEach(function(range) { %>
+    <%= range.name %>: (
+        start: <%= range.start %>,
+        end: <%= range.end %>,
+        exemplary: <%= range.exemplary %>,
+        isFirst: <%= range.isFirst %>,
+        isLast: <%= range.isLast %>
+    ),
+<% }); %>
+);
+
+@function size($value) {
+    @return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
+}
+
+@mixin for($name) {
+    $start: map.get(map.get($layout, $name), "start");
+    $end: map.get(map.get($layout, $name), "end");
+    $isFirst: map.get(map.get($layout, $name), "isFirst");
+    $isLast: map.get(map.get($layout, $name), "isLast");
+    $exemplary: map.get(map.get($layout, $name), "exemplary");
+    $__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
+
+    @if $isFirst == true and $isLast == true {
+        @content;
+    } @else if $isFirst == true {
+        @media (max-width: #{$end}px) {
+            @content;
+        }
+    } @else if $isLast == true {
+        @media (min-width: #{$start}px) {
+            @content;
+        }
+    } @else {
+        @media (min-width: #{$start}px) and (max-width: #{$end}px) {
+            @content;
+        }
+    }
+
+    // reset global variable back to first layout's exemplary (mobile-first)
+    $__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %> !global;
+}

package/src/Client/Client.test.ts

@@ -2,72 +2,97 @@ import { Client } from './Client';
 import { projectMock } from './__mock__/projectMock';
 import { articleMock } from './__mock__/articleMock';
 import { typePresetsMock } from './__mock__/typePresetsMock';
-import { TMeta, TPageMeta } from '@cntrl-site/core';
 import { keyframesMock } from './__mock__/keyframesMock';
 
 describe('Client', () => {
-  it('returns project', async () => {
-    const projectId = 'MY_PROJECT_ID';
+  it('throws an error when no project ID passed to the connect URL', async () => {
+    const projectId = '';
     const apiKey = 'MY_API_KEY';
-    let fetchCalledTimes = 0;
     const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
+    expect(() => new Client(apiUrl)).toThrow(new Error('Project ID is missing in the URL.'));
+    expect(() => new Client('https://api.cntrl.site'))
+      .toThrow(new Error('Project ID is missing in the URL.'));
+  });
+
+  it('throws an error when no API key passed to the connect URL', async () => {
+    const projectId = 'whatever';
+    const apiKey = '';
+    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
+    expect(() => new Client(apiUrl)).toThrow(new Error('API key is missing in the URL.'));
+  });
+
+  it('returns page data', async () => {
+    const projectId = 'projectId';
+    const API_BASE_URL = 'api-test.cntrl.site';
+    const fetchesMap = {
+      [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
+      [`https://${API_BASE_URL}/projects/${projectId}/type-presets`]: typePresetsMock,
+      [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId`]: {
+        article: articleMock,
+        keyframes: keyframesMock
+      }
+    };
+    const apiKey = 'MY_API_KEY';
+    let fetchCalledTimes = 0;
+    const apiUrl = `https://${projectId}:${apiKey}@${API_BASE_URL}/`;
     const fetch = async (url: string) => {
       fetchCalledTimes += 1;
-      expect(url).toBe(`https://api.cntrl.site/projects/${projectId}`);
       return Promise.resolve({
         ok: true,
-        json: () => Promise.resolve(projectMock),
+        json: () => Promise.resolve(fetchesMap[url]),
         statusText: ''
       });
     };
     const client = new Client(apiUrl, fetch);
-    const project = await client.getProject();
-    expect(fetchCalledTimes).toBe(1);
-    expect(project).toEqual(projectMock);
-  });
-
-  it('throws an error upon project fetch failure', async () => {
-    const projectId = 'MY_PROJECT_ID';
-    const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    const fetch = async () => Promise.resolve({
-      ok: false,
-      statusText: 'reason',
-      json: () => Promise.resolve()
+    const pageData = await client.getPageData('/');
+    expect(fetchCalledTimes).toBe(3);
+    expect(pageData.project).toEqual(projectMock);
+    expect(pageData.article).toEqual(articleMock);
+    expect(pageData.typePresets).toEqual(typePresetsMock);
+    expect(pageData.keyframes).toEqual(keyframesMock);
+    expect(pageData.meta).toEqual({
+      description: 'page description',
+      favicon: 'project favicon',
+      keywords: 'page keywords',
+      opengraphThumbnail: 'page thumbnail',
+      title: 'page title'
     });
-    const client = new Client(apiUrl, fetch);
-    await expect(client.getProject()).rejects.toEqual(new Error('Failed to fetch project with id #MY_PROJECT_ID: reason'));
   });
 
-  it('returns article by page slug', async () => {
-    let fetchCalledTimes = 0;
-    const projectId = 'MY_PROJECT_ID';
+  it('ignores page meta if it is not enabled and uses project meta instead', async () => {
+    const projectId = 'projectId';
+    const API_BASE_URL = 'api-test.cntrl.site';
+    const fetchesMap = {
+      [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
+      [`https://${API_BASE_URL}/projects/${projectId}/type-presets`]: typePresetsMock,
+      [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId2`]: {
+        article: articleMock,
+        keyframes: keyframesMock
+      }
+    };
     const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    const projectApiUrl = `https://api.cntrl.site/projects/${projectId}`;
-    const articleApiUrl = `https://api.cntrl.site/projects/${projectId}/articles/articleId`;
+    let fetchCalledTimes = 0;
+    const apiUrl = `https://${projectId}:${apiKey}@${API_BASE_URL}/`;
     const fetch = async (url: string) => {
       fetchCalledTimes += 1;
-      if (fetchCalledTimes === 1) {
-        expect(url).toBe(projectApiUrl);
-      }
-      if (fetchCalledTimes === 2) {
-        expect(url).toBe(articleApiUrl);
-      }
       return Promise.resolve({
         ok: true,
-        json: () => Promise.resolve(url === projectApiUrl ? projectMock : { article: articleMock, keyframes: keyframesMock }),
+        json: () => Promise.resolve(fetchesMap[url]),
         statusText: ''
       });
     };
     const client = new Client(apiUrl, fetch);
-    const { article, keyframes } = await client.getPageArticle('/');
-    expect(fetchCalledTimes).toBe(2);
-    expect(article).toEqual(articleMock);
-    expect(keyframes).toEqual(keyframesMock);
+    const pageData = await client.getPageData('/2');
+    expect(pageData.meta).toEqual({
+      description: 'project description',
+      favicon: 'project favicon',
+      keywords: 'project keywords',
+      opengraphThumbnail: 'project opengraph',
+      title: 'project title'
+    });
   });
 
-  it('throws an error upon project fetch failure when trying to get article by slug', async () => {
+  it('throws an error upon page data fetch failure', async () => {
     const projectId = 'MY_PROJECT_ID';
     const apiKey = 'MY_API_KEY';
     const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
@@ -77,25 +102,7 @@ describe('Client', () => {
       json: () => Promise.resolve()
     });
     const client = new Client(apiUrl, fetch);
-    await expect(client.getPageArticle('/'))
-      .rejects.toEqual(new Error(`Failed to fetch project with id #${projectId}: reason`));
-  });
-
-  it('throws an error upon article fetch failure when trying to get article by slug', async () => {
-    const projectId = 'MY_PROJECT_ID';
-    const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    const projectApiUrl = `https://api.cntrl.site/projects/${projectId}`;
-    const fetch = (url: string) => {
-      return Promise.resolve({
-        ok: url === projectApiUrl,
-        json: () => Promise.resolve(projectMock),
-        statusText: 'reason'
-      });
-    };
-    const client = new Client(apiUrl, fetch);
-    await expect(client.getPageArticle('/'))
-      .rejects.toEqual(new Error('Failed to fetch article with id #articleId: reason'));
+    await expect(client.getPageData('/')).rejects.toEqual(new Error('Failed to fetch project with id #MY_PROJECT_ID: reason'));
   });
 
   it('throws an error when trying to fetch article by nonexistent slug', async () => {
@@ -112,99 +119,7 @@ describe('Client', () => {
       });
     };
     const client = new Client(apiUrl, fetch);
-    await expect(client.getPageArticle(slug))
+    await expect(client.getPageData(slug))
       .rejects.toEqual(new Error(`Page with a slug ${slug} was not found in project with id #${projectId}`));
   });
-
-  it('returns type presets by project id', async () => {
-    let fetchCalledTimes = 0;
-    const projectId = 'MY_PROJECT_ID';
-    const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    const fetch = (url: string) => {
-      fetchCalledTimes += 1;
-      expect(url).toBe(`https://api.cntrl.site/projects/${projectId}/type-presets`);
-      return Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve(typePresetsMock),
-        statusText: ''
-      });
-    };
-    const client = new Client(apiUrl, fetch);
-    const presets = await client.getTypePresets();
-    expect(presets).toEqual(typePresetsMock);
-    expect(fetchCalledTimes).toEqual(1);
-  });
-
-  it('throws an error upon type presets fetch failure', async () => {
-    const projectId = 'MY_PROJECT_ID';
-    const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    const fetch = () => {
-      return Promise.resolve({
-        ok: false,
-        json: () => Promise.resolve(),
-        statusText: 'reason'
-      });
-    };
-    const client = new Client(apiUrl, fetch);
-    await expect(client.getTypePresets()).rejects.toEqual(
-      new Error(`Failed to fetch type presets for the project with id #${projectId}: reason`)
-    );
-  });
-
-  it('merges two meta objects into one with priority of page-based over project-based', () => {
-    const pageMeta: TPageMeta = {
-      enabled: true,
-      description: 'page-desc',
-      title: 'page-title'
-    };
-
-    const projectMeta: TMeta = {
-      opengraphThumbnail: 'proj-og',
-      description: 'proj-desc',
-      title: 'proj-title',
-      keywords: 'project, keywords'
-    };
-    const meta = Client.getPageMeta(projectMeta, pageMeta);
-    expect(meta.keywords).toBe(projectMeta.keywords);
-    expect(meta.opengraphThumbnail).toBe(projectMeta.opengraphThumbnail);
-    expect(meta.description).toBe(pageMeta.description);
-    expect(meta.title).toBe(pageMeta.title);
-  });
-
-  it('ignores page meta when `enabled` is set to `false` and uses only generic project meta', () => {
-    const pageMeta: TPageMeta = {
-      enabled: false,
-      description: 'page-desc',
-      title: 'page-title'
-    };
-
-    const projectMeta: TMeta = {
-      opengraphThumbnail: 'proj-og',
-      keywords: 'project, keywords'
-    };
-
-    const meta = Client.getPageMeta(projectMeta, pageMeta);
-    expect(meta.keywords).toBe(projectMeta.keywords);
-    expect(meta.opengraphThumbnail).toBe(projectMeta.opengraphThumbnail);
-    expect(meta.description).toBeUndefined();
-    expect(meta.title).toBeUndefined();
-  });
-
-  it('throws an error when no project ID passed to the connect URL', async () => {
-    const projectId = '';
-    const apiKey = 'MY_API_KEY';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    expect(() => new Client(apiUrl)).toThrow(new Error('Project ID is missing in the URL.'));
-    expect(() => new Client('https://api.cntrl.site'))
-      .toThrow(new Error('Project ID is missing in the URL.'));
-  });
-
-  it('throws an error when no API key passed to the connect URL', async () => {
-    const projectId = 'whatever';
-    const apiKey = '';
-    const apiUrl = `https://${projectId}:${apiKey}@api.cntrl.site/`;
-    expect(() => new Client(apiUrl)).toThrow(new Error('API key is missing in the URL.'));
-  });
 });

package/src/Client/Client.ts

@@ -9,7 +9,8 @@ import {
   TypePresetsSchema,
   TPage,
   TKeyframeAny,
-  KeyframesSchema
+  KeyframesSchema,
+  TLayout
 } from '@cntrl-site/core';
 import fetch from 'isomorphic-fetch';
 import { URL } from 'url';
@@ -29,51 +30,62 @@ export class Client {
     }
   }
 
-  async getProject(): Promise<TProject> {
+  private static getPageMeta(projectMeta: TMeta, pageMeta: TPageMeta): TMeta {
+    return pageMeta.enabled ? {
+      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
+    } : projectMeta;
+  }
+
+  async getPageData(pageSlug: string): Promise<CntrlPageData> {
     try {
-      const response = await this.fetchProject();
-      const data = await response.json();
-      const project = ProjectSchema.parse(data);
-      return project;
+      const project = await this.fetchProject();
+      const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
+      const [{ article, keyframes }, typePresets] = await Promise.all([
+        this.fetchArticle(articleId),
+        this.fetchTypePresets()
+      ]);
+      const page = project.pages.find(page => page.slug === pageSlug)!;
+      const meta = Client.getPageMeta(project.meta, page?.meta!);
+      return {
+        project,
+        typePresets,
+        article,
+        keyframes,
+        meta
+      };
     } catch (e) {
       throw e;
     }
   }
 
-  async getPageArticle(pageSlug: string): Promise<{ article: TArticle, keyframes: TKeyframeAny[] }> {
+  async getProjectPagesPaths(): Promise<string[]> {
     try {
-      const projectResponse = await this.fetchProject();
-      const data = await projectResponse.json();
-      const project = ProjectSchema.parse(data);
-      const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
-      const articleResponse = await this.fetchArticle(articleId);
-      const articleData = await articleResponse.json();
-      const article = ArticleSchema.parse(articleData.article);
-      const keyframes = KeyframesSchema.parse(articleData.keyframes);
-      return { article, keyframes };
+      const { pages } = await this.fetchProject();
+      return pages.map(p => p.slug);
     } catch (e) {
       throw e;
     }
   }
 
-  async getTypePresets(): Promise<TTypePresets> {
-    const response = await this.fetchTypePresets();
-    const data = await response.json();
-    const typePresets = TypePresetsSchema.parse(data);
-    return typePresets;
+  async getLayouts(): Promise<TLayout[]> {
+    try {
+      const { layouts } = await this.fetchProject();
+      return layouts;
+    } catch (e) {
+      throw e;
+    }
   }
 
-  public static getPageMeta(projectMeta: TMeta, pageMeta: TPageMeta): TMeta {
-    return pageMeta.enabled ? {
-      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
-    } : projectMeta;
+  async getTypePresets(): Promise<TTypePresets> {
+    const response = await this.fetchTypePresets();
+    return response;
   }
 
-  private async fetchProject(): Promise<FetchImplResponse> {
+  private async fetchProject(): Promise<TProject> {
     const { username: projectId, password: apiKey, origin } = this.url;
     const url = new URL(`/projects/${projectId}`, origin);
     const response = await this.fetchImpl(url.href, {
@@ -84,10 +96,12 @@ export class Client {
     if (!response.ok) {
       throw new Error(`Failed to fetch project with id #${projectId}: ${response.statusText}`);
     }
-    return response;
+    const data = await response.json();
+    const project = ProjectSchema.parse(data);
+    return project;
   }
 
-  private async fetchArticle(articleId: string): Promise<FetchImplResponse> {
+  private async fetchArticle(articleId: string): Promise<ArticleData> {
     const { username: projectId, password: apiKey, origin } = this.url;
     const url = new URL(`/projects/${projectId}/articles/${articleId}`, origin);
     const response = await this.fetchImpl(url.href, {
@@ -98,10 +112,13 @@ export class Client {
     if (!response.ok) {
       throw new Error(`Failed to fetch article with id #${articleId}: ${response.statusText}`);
     }
-    return response;
+    const data = await response.json();
+    const article = ArticleSchema.parse(data.article);
+    const keyframes = KeyframesSchema.parse(data.keyframes);
+    return { article, keyframes };
   }
 
-  private async fetchTypePresets(): Promise<FetchImplResponse> {
+  private async fetchTypePresets(): Promise<TTypePresets> {
     const { username: projectId, password: apiKey, origin } = this.url;
     const url = new URL(`/projects/${projectId}/type-presets`, origin);
     const response = await this.fetchImpl(url.href, {
@@ -114,7 +131,9 @@ export class Client {
         `Failed to fetch type presets for the project with id #${projectId}: ${response.statusText}`
       );
     }
-    return response;
+    const data = await response.json();
+    const typePresets = TypePresetsSchema.parse(data);
+    return typePresets;
   }
 
   private findArticleIdByPageSlug(slug: string, pages: TPage[]): string {
@@ -134,3 +153,12 @@ interface FetchImplResponse {
 }
 
 type FetchImpl = (url: string, init?: RequestInit) => Promise<FetchImplResponse>;
+interface ArticleData {
+  article: TArticle;
+  keyframes: TKeyframeAny[];
+}
+interface CntrlPageData extends ArticleData {
+  project: TProject;
+  typePresets: TTypePresets;
+  meta: TMeta;
+}

package/src/Client/__mock__/projectMock.ts

@@ -14,11 +14,11 @@ export const projectMock: TProject = {
     head: ''
   },
   meta: {
-    favicon: undefined,
-    title: undefined,
-    opengraphThumbnail: undefined,
-    keywords: undefined,
-    description: undefined
+    favicon: 'project favicon',
+    title: 'project title',
+    opengraphThumbnail: 'project opengraph',
+    keywords: 'project keywords',
+    description: 'project description'
   },
   grid: {
     color: 'rgba(0, 0, 0, 1)'
@@ -30,11 +30,25 @@ export const projectMock: TProject = {
     slug: '/',
     isPublished: true,
     meta: {
-      opengraphThumbnail: 'page-thumbnail',
-      title: 'page-title',
-      description: 'page-description',
+      opengraphThumbnail: 'page thumbnail',
+      title: 'page title',
+      description: 'page description',
       enabled: true,
-      keywords: 'page-keywords'
+      keywords: 'page keywords'
     }
-  }]
+  },
+    {
+      id: 'pageId2',
+      title: 'Page 2',
+      articleId: 'articleId2',
+      slug: '/2',
+      isPublished: true,
+      meta: {
+        opengraphThumbnail: 'page thumbnail',
+        title: 'page title',
+        description: 'page description',
+        enabled: false,
+        keywords: 'page keywords'
+      }
+    }]
 };

package/src/cli.ts

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import ejs from 'ejs';
+import { config } from 'dotenv';
+import { program } from 'commander';
+import { TLayout } from '@cntrl-site/core';
+import { Client } from './Client/Client';
+
+program
+  .command('generate-layouts')
+  .option('-o, --output <outputFilePath>', 'Output file path', 'cntrl.scss')
+  .option('-e, --env <envFilename>', 'Name of the .env file', '.env.local')
+  .action(async (options) => {
+    try {
+      config({ path: options.env });
+      const templateFilePath = path.resolve(__dirname, '../resources/template.scss.ejs');
+      const scssTemplate = fs.readFileSync(templateFilePath, 'utf-8');
+      const apiUrl = process.env.CNTRL_API_URL;
+      if (!apiUrl) {
+        throw new Error('Environment variable "CNTRL_API_URL" must be set.');
+      }
+      const client = new Client(apiUrl);
+      const layouts = await client.getLayouts();
+      const ranges = convertLayouts(layouts);
+
+      const compiledTemplate = ejs.compile(scssTemplate);
+      const renderedTemplate = compiledTemplate({ ranges });
+
+      const outputFilePath = path.resolve(process.cwd(), options.output);
+      fs.writeFileSync(outputFilePath, renderedTemplate);
+
+      console.log(`Generated .scss file at ${outputFilePath}`);
+    } catch (error) {
+      console.error('An error occurred:', error);
+      process.exit(1);
+    }
+  });
+
+function convertLayouts(layouts: TLayout[], maxLayoutWidth: number = Number.MAX_SAFE_INTEGER): LayoutRange[] {
+  const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+  const mapped = sorted.map<LayoutRange>((layout, i, ls) => {
+    const next = ls[i + 1];
+    return {
+      start: layout.startsWith,
+      end: next ? next.startsWith - 1 : maxLayoutWidth,
+      exemplary: layout.exemplary,
+      name: layout.title,
+      isFirst: i === 0,
+      isLast: !next
+    };
+  });
+  return mapped;
+}
+
+export interface LayoutRange {
+  /** closed range [start, end] */
+  start: number;
+  end: number;
+  exemplary: number;
+  name: string;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+program.parse(process.argv);