Naively Programmable Module

    pageobjectmodel

    0.0.2 • Public • Published

    POM

    POM Definition and basic Node library

    • To be used in WYSIWYM tools

    • Influenced by

    • Constrains

      • Enforce clear copy structure, i.e. paragraphs can contain only inline formatting.
      • Documents can be nested
      • Allows components and extensions

    Basic Model Schema

    Represent various HTML/Markdown artifacts

    Node

    Extends Object

    Field Type Required Description
    type string Y Define node type
    name string N ID applied by editor for more efficient referencing. Doesn't have to be saved to DB
    attrs object N Object of key-value attributes

    Naming Convention

    • type of lowercase represent semantic / html / markdown artifacts and core classes
    • type of Pascal-case represnet components

    Block Node

    Extends Node

    Field Type Required Description
    items array Y Contains nedsted nodes

    Document

    Extends BlockNode

    Field Value
    type document

    JSON Example

    {
      "type" : "document",
      "items" : [{
        "type" : "heading",
        "level" : 1,
        "text" : "Hello world"
      }, {
        "type" : "paragraph",
        "text" : "This is my lorem ipsum"
      }]
    }

    YAML Example

    type: document
    items:
      -
        type: heading
        level: 1
        text: Hello world
      -
        type: paragraph
        text: This is my lorem ipsum
      

    Markdown Example

    Hello world
     
    This is my lorem ipsum.

    !IMPORTANT! As documents can be serialized to Markdown, they can be stored as it in both JSON and YAML formats. It's used often, when you have Fields component and store sub document (text area) as sub item.

    Quote

    Extends BlockNode

    Field Value
    type quote

    TextNode

    Extends Node

    Field Type Required Description
    text string Y Contains text content
    formats array N Contains format mappings
    Field Value
    type text

    JSON Example

    {
      "type" : "text",
      "text" : "This is my lorem ipsum"
      "formats" : [{
        "slice": [0,4],
        "apply": ["strong"]
      },{
        "slice": [11,5],
        "apply": [{
          "type": "A",
          "title": "Lorem ipsum"
          "href" : "http://www.lipsum.com/"
        }]
      }]
    }

    YAML Example

    type: paragraph
    text: This is my lorem ipsum
    formats:
      -
        slice: [0,4]
        apply: [strong]
      -
        splice: [11,5]
        apply:
          -
            type: A
            title: Lorem ipsum
            href: http://www.lipsum.com/
     

    Markdown Example

    **This** is my [lorem ipsum](http://www.lipsum.com/ "Lorem ipsum").

    Format

    Extends Object

    Field Type Required Description
    slice array of 2 integers Y Contains slice begining and length
    apply array of strings Y Contains list of formats to be applied

    Allowed formats:

    • strong
    • em
    • small
    • code
    • abbr
    • cite
    • code
    • a
    • sub
    • sup

    Mapping of not allowed inline tags:

    From To
    b strong
    big strong
    i em
    tt code
    acronym abbr
    var code
    kbd code

    Mapping to be defined:

    • dfn
    • time
    • bdo
    • q
    • span
    • del
    • s

    Link

    Extends Format

    Field Type Required Description
    href string Y Target of the link
    title string N Title of the link
    target string N Target window of the link
    Field Value
    type A

    Paragraph

    Extends TextNode

    Field Value
    type paragraph

    Image

    Extends Node

    Field Type Required Description
    src string Y Image location
    title string N Image title
    alt string N Image alternative text
    Field Value
    type image

    Heading

    Extends TextNode

    Field Type Required Description
    level number from 1 to 6 Y Heading level
    Field Value
    type heading

    StaticBlockNode

    Extends BlockNode

    Components Model

    Reflect more complex logic, mostly facilitated by Skaryna and Lackey.

    Fields

    Extends Node

    Field Type Required Description
    * (any other than type mixed N Slot for key/value listed children
    Field Value
    type Fields

    Variants

    Extends Node

    Applies logic based on besetmatch

    Field Type Required Description
    * (any other than type mixed N Slot for key/value listed children
    Field Value
    type Variants

    Lackey components to be considered as part of the standard

    • List
    • Block
    • Media

    Lackey complex example

    From Lackey example site

    type: Fields
    title: Welcome to Lackey
    subtitle: |
        **A new breed of** CMS
    headerImage:
        type: Media
        source: img/core/lackey-site-design.png
    blocks:
        type: List
        items:
            -
                type: Block
                template: ~/core/partials/block/signup-demo
                fields:
                    title: Contact us for a **free** personal demo of the Lackey CMS
                props:
                    namePlaceholder: Name
                    emailPlaceholder: Email
                    buttonLabel: Send me my link!
     
            -
                type: Block
                template: ~/core/partials/block/copy-media
                fields:
                    title: For Content Admins
                    subtitle: Easy to use and difficult to break.
                    copy: |
                        Lackey facilitates the Client / Agency relationship, enforcing design rules and keeping admin users on a need to know basis. No dev stuff. It’s simple, focused & consistent. Most CMS's let admins pick fonts, add hex ref colours, write HTML tags, and inject content in situations where it was never intended to go. Lackey gives admins just enough power and an easy life.
                    image:
                        type: Media
                        source: img/core/lackey-cms-screenshot-1.png
                props:
                    theme: white
                    imageAlignment: side
     
            -
                type: Block
                template: ~/core/partials/block/copy-media
                fields:
                    title: Power for Developers
                    subtitle: Build better, faster.
                    copy: |
                        The core technologies Lackey is built on are [Node.js](https://nodejs.org/) & [PostgreSQL](https://www.postgresql.org/). We use [npm](https://www.npmjs.com/) in favour of a plugin architecture and have the [core implemented as an npm module](https://github.com/getlackey/lackey-cms) and abstracted out from the instance (website or theme to those transitioning to us to escape Wordpress). We also provide an [open source example site](https://github.com/getlackey/lackey-cms-site) which will allow you to run/reuse the exact website you're reading now. Enjoy!
                    image:
                        type: Media
                        source: img/core/lackey-cms-screenshot-2.png
                props:
                    theme: white
                    imageAlignment: side
     
            -
                type: Block
                template: ~/core/partials/block/copy-media
                fields:
                    title: Freedom for Designers
                    subtitle: Be creative. Not constrained.
                    copy: |
                        Downloading $20 Wordpress themes and retrofitting the PSD with a font change brings shame on us all. Be original! Lackey layouts are limited only by your creativity. Structural Page Composition can be delegated to the client/admin who best knows how to tell their story; without giving them the means to compromise it's aesthetic. This new breed of CMS has been reimagined from the ground up as the perfect tool to collaborate on amazing, unique visual content.
                    image:
                        type: Media
                        source: img/core/lackey-emblem.svg
                props:
                    theme: blue
                    imageAlignment: center
     
            -
                type: Block
                template: ~/core/partials/block/copy-cta
                fields:
                    copy: The Lackey UI roadmap prototype is on InVision. Use your right arrow key!
                    backgroundImage:
                        type: Media
                        source: img/core/lackey-ui-prototype.jpg
                props:
                    href: https://invis.io/P383OLENF
                    buttonLabel: Let's see it then

    Install

    npm i pageobjectmodel

    DownloadsWeekly Downloads

    3

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • sielay