@wmfs/cardscript-to-quasar

Produces HTML with Quasar-markup from Cardscript JSON

Usage no npm install needed!

<script type="module">
  import wmfsCardscriptToQuasar from 'https://cdn.skypack.dev/@wmfs/cardscript-to-quasar';
</script>

README

cardscript-to-quasar

Tymly Cardscript CircleCI npm (scoped) codecov CodeFactor Dependabot badge Commitizen friendly JavaScript Style Guide license

Produces HTML with Quasar-markup from Cardscript JSON

Install

$ npm install @wmfs/cardscript-to-quasar --save

Usage

const cardscriptToQuasar = require('@wmfs/cardscript-to-quasar')

const quasarTemplate = cardscriptToQuasar(
  //
  // Some Cardscript:
  //
  {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Change me!",
        "color": "attention",
        "horizontalAlignment": "center"
      }
    ]
  },
  // Some options:
  {
    "fieldLabelWidth": 12,
    "imageSourceTemplate": "url(statics/${imagePath})"
  }
)

// quasarTemplate:
//   HTML string with Quasar components all configured to best represent the supplied Cardscript.

API

cardscriptToQuasar(cardscriptJSON, options)

Options

  • All options are optional
Option Description
fieldLabelWidth For Cardscript components that will be generated within a Quasar field component, this is the value passed to the label-width property, defaults to 12 (e.g. labels will always be above field components, and not rendered to the side).
imageSourceTemplate This is a string-template for use by Cardscript components such as Jumbotron to conjure a full reference to an image. Defaults to url(statics/${imagePath}). Note imagePath here is the value provided in the Cardscript config for the component (e.g. the value of backgroundImage in the case of the Jumbotron).

Testing

$ npm test

License

MIT