Naboo's Podracing Misadventure
    Wondering what’s next for npm?Check out our public roadmap! »

    @axelspringer/mango-pagemanager
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.121 • Public • Published

    😺 Mango Page Manager


    Taylor Swift Volkswagen TypeScript MIT license

    Getting Started

    requires a node version >= 6 and an npm version >= 3.x.x

    we do provide a help command to display all possible arguments

    # Install the base package and the plugin (could also be global -g) 
    npm i @axelspringer/mango-pagemanager

    Usage

    Create a pagemanager.ts file with the following content.

    import Vue from 'vue'
    import IFrame from '../components/post'
    import MangoPageManager from '@axelspringer/mango-pagemanager'
     
    // use pagemanager
    Vue.use(PageManager)
     
    export default new PageManager({
      blocks: [
        {
          pageBlock: 'inline_frame',
          component: iFrame
        }
      ]
    })

    This configures the Page Manager to map a page block to a component.

    import { Vue, Component } from 'vue-property-decorator'
    import HOME_QUERY from '../../graphql/home.graphql'
     
    @Component
    export default class Home extends Vue {
     
      /**
       *
       */
      public blocks = []
     
      /**
       * Render function
       *
       * @param h
       */
      public render() {
        return (
          <main class='start'>
            <pagemanager-renderer blocks={this.blocks || []} />
          </main>
        )
      }
    }

    The pagemanager exposes $pageblock on the component with the page block data to render. You have to add a name property. This is the property on which the Page Manager data and blocks are matched.

    import { Vue, Component } from 'vue-property-decorator'
     
    export function renderInnerHtml(h, atts) {
      return atts.map(att => h('iframe', { attrs: att.value }))
    }
     
    @Component({
      name: 'iFrame'
    })
    export default class iFrame extends Vue {
      public render(h) {
        if (!this.$pageblock) return null
     
        return (<div>{renderInnerHtml(h, this.$pageblock)}</div>)
      }
    }
     

    License

    MIT

    Keywords

    none

    Install

    npm i @axelspringer/mango-pagemanager

    DownloadsWeekly Downloads

    184

    Version

    1.0.0-beta.121

    License

    MIT

    Unpacked Size

    83.3 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar