@gxpl/sdk 0.0.1

package/dist/types/keyframe/Keyframe.d.ts

@@ -0,0 +1,86 @@
+import { FillLayer } from '../article/Item';
+export type KeyframeAny = Keyframe<KeyframeType>;
+export interface Keyframe<T extends KeyframeType> {
+    id: string;
+    type: T;
+    layoutId: string;
+    itemId: string;
+    position: number;
+    value: KeyframeValueMap[T];
+}
+export declare enum KeyframeType {
+    Dimensions = "dimensions",
+    Position = "position",
+    Rotation = "rotation",
+    BorderRadius = "border-radius",
+    BorderWidth = "border-width",
+    Opacity = "opacity",
+    Scale = "scale",
+    TextColor = "text-color",
+    LetterSpacing = "letter-spacing",
+    WordSpacing = "word-spacing",
+    Blur = "blur",
+    BackdropBlur = "backdrop-blur",
+    FXParams = "fx-params",
+    BorderFill = "border-fill",
+    Fill = "fill"
+}
+export interface KeyframeValueMap {
+    [KeyframeType.Dimensions]: DimensionsValue;
+    [KeyframeType.Position]: PositionValue;
+    [KeyframeType.Rotation]: RotationValue;
+    [KeyframeType.BorderRadius]: BorderRadiusValue;
+    [KeyframeType.BorderWidth]: BorderWidthValue;
+    [KeyframeType.Opacity]: OpacityValue;
+    [KeyframeType.Scale]: ScaleValue;
+    [KeyframeType.Blur]: BlurValue;
+    [KeyframeType.BackdropBlur]: BackdropBlurValue;
+    [KeyframeType.TextColor]: TextColorValue;
+    [KeyframeType.LetterSpacing]: LetterSpacingValue;
+    [KeyframeType.WordSpacing]: WordSpacingValue;
+    [KeyframeType.FXParams]: FXParamsValue;
+    [KeyframeType.BorderFill]: BorderFillValue;
+    [KeyframeType.Fill]: FillValue;
+}
+interface DimensionsValue {
+    width: number;
+    height: number;
+}
+interface PositionValue {
+    top: number;
+    left: number;
+}
+interface RotationValue {
+    angle: number;
+}
+interface BorderRadiusValue {
+    radius: number;
+}
+interface BorderWidthValue {
+    borderWidth: number;
+}
+interface OpacityValue {
+    opacity: number;
+}
+interface ScaleValue {
+    scale: number;
+}
+interface BlurValue {
+    blur: number;
+}
+interface BackdropBlurValue {
+    backdropBlur: number;
+}
+interface TextColorValue {
+    color: string;
+}
+interface LetterSpacingValue {
+    letterSpacing: number;
+}
+interface WordSpacingValue {
+    wordSpacing: number;
+}
+type BorderFillValue = FillLayer[];
+type FXParamsValue = Record<string, number>;
+type FillValue = FillLayer[];
+export {};

package/dist/types/keyframe/Keyframe.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeType = void 0;
+var KeyframeType;
+(function (KeyframeType) {
+    KeyframeType["Dimensions"] = "dimensions";
+    KeyframeType["Position"] = "position";
+    KeyframeType["Rotation"] = "rotation";
+    KeyframeType["BorderRadius"] = "border-radius";
+    KeyframeType["BorderWidth"] = "border-width";
+    KeyframeType["Opacity"] = "opacity";
+    KeyframeType["Scale"] = "scale";
+    KeyframeType["TextColor"] = "text-color";
+    KeyframeType["LetterSpacing"] = "letter-spacing";
+    KeyframeType["WordSpacing"] = "word-spacing";
+    KeyframeType["Blur"] = "blur";
+    KeyframeType["BackdropBlur"] = "backdrop-blur";
+    KeyframeType["FXParams"] = "fx-params";
+    KeyframeType["BorderFill"] = "border-fill";
+    KeyframeType["Fill"] = "fill";
+})(KeyframeType || (exports.KeyframeType = KeyframeType = {}));

package/dist/types/project/Fonts.d.ts

@@ -0,0 +1,22 @@
+export declare enum FontFileTypes {
+    OTF = "otf",
+    TTF = "ttf",
+    WOFF = "woff",
+    WOFF2 = "woff2",
+    EOT = "eot"
+}
+export interface CustomFontFile {
+    type: FontFileTypes;
+    url: string;
+}
+export interface CustomFont {
+    name: string;
+    style: string;
+    weight: number;
+    files: CustomFontFile[];
+}
+export interface Fonts {
+    google: string;
+    adobe: string;
+    custom: CustomFont[];
+}

package/dist/types/project/Fonts.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFileTypes = void 0;
+var FontFileTypes;
+(function (FontFileTypes) {
+    FontFileTypes["OTF"] = "otf";
+    FontFileTypes["TTF"] = "ttf";
+    FontFileTypes["WOFF"] = "woff";
+    FontFileTypes["WOFF2"] = "woff2";
+    FontFileTypes["EOT"] = "eot";
+})(FontFileTypes || (exports.FontFileTypes = FontFileTypes = {}));

package/dist/types/project/Layout.d.ts

@@ -0,0 +1,6 @@
+export interface Layout {
+    id: string;
+    title: string;
+    startsWith: number;
+    exemplary: number;
+}

package/dist/types/project/Layout.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/project/Meta.d.ts

@@ -0,0 +1,9 @@
+export interface Meta extends GenericMeta {
+    favicon?: string;
+}
+export interface GenericMeta {
+    title?: string;
+    description?: string;
+    opengraphThumbnail?: string;
+    keywords?: string;
+}

package/dist/types/project/Meta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/project/Page.d.ts

@@ -0,0 +1,11 @@
+import { GenericMeta } from './Meta';
+export interface PageMeta extends GenericMeta {
+    enabled?: boolean;
+}
+export interface Page {
+    id: string;
+    title: string;
+    articleId: string;
+    slug: string;
+    meta?: PageMeta;
+}

package/dist/types/project/Page.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/project/Project.d.ts

@@ -0,0 +1,17 @@
+import { Layout } from './Layout';
+import { Fonts } from './Fonts';
+import { Meta } from './Meta';
+import { Page } from './Page';
+export interface AdditionalHTML {
+    head: string;
+    afterBodyOpen: string;
+    beforeBodyClose: string;
+}
+export interface Project {
+    id: string;
+    html: AdditionalHTML;
+    meta: Meta;
+    layouts: Layout[];
+    pages: Page[];
+    fonts: Fonts;
+}

package/dist/types/project/Project.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { Layout } from './types/project/Layout';
+export declare function getLayoutStyles<V, M>(layouts: Layout[], layoutValues: Record<string, V>[], mapToStyles: (values: V[], exemplary: number) => M): string;
+export declare function getLayoutMediaQuery(layoutId: string, layouts: Layout[]): string;

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@gxpl/sdk",
+  "version": "0.0.1",
+  "description": "Generic SDK for use in public websites.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/sdk.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./style/sdk.css": {
+      "default": "./dist/sdk.css"
+    }
+  },
+  "scripts": {
+    "test": "jest",
+    "dev": "vite development",
+    "prebuild": "rimraf ./dist",
+    "build": "vite build && tsc --project tsconfig.build.json",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "bin": {
+    "gxpl-sdk": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "resources"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/genesisxplatform/sdk.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/genesisxplatform/sdk/issues"
+  },
+  "homepage": "https://github.com/genesisxplatform/sdk#readme",
+  "directories": {
+    "lib": "dist"
+  },
+  "dependencies": {
+    "@splidejs/react-splide": "^0.7.12",
+    "@types/ejs": "^3.1.2",
+    "@types/isomorphic-fetch": "^0.0.36",
+    "@types/ua-parser-js": "^0.7.39",
+    "classnames": "^2.5.1",
+    "commander": "^10.0.1",
+    "dotenv": "^16.1.3",
+    "ejs": "^3.1.9",
+    "isomorphic-fetch": "^3.0.0",
+    "mp4box": "^0.5.2",
+    "styled-jsx": "^5.1.6",
+    "ts-node": "^10.9.1",
+    "ua-parser-js": "^1.0.37",
+    "url": "^0.11.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^10.1.0",
+    "jest": "^28.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.86.3",
+    "ts-jest": "^28.0.8",
+    "typescript": "^5.2.2",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}

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;
+}