https://github.com/wmfs/cardscript-to-quasar

Produces a template for use with Quasar from some Cardscript.
https://github.com/wmfs/cardscript-to-quasar

cardscript tymly

Last synced: 3 months ago
JSON representation

Produces a template for use with Quasar from some Cardscript.

• Host: GitHub
• URL: https://github.com/wmfs/cardscript-to-quasar
• Owner: wmfs
• License: mit
• Created: 2019-01-18T08:38:36.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T22:05:52.000Z (4 months ago)
• Last Synced: 2024-10-14T07:20:48.994Z (3 months ago)
• Topics: cardscript, tymly
• Language: JavaScript
• Homepage:
• Size: 1.22 MB
• Stars: 8
• Watchers: 7
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# cardscript-to-quasar

[![Tymly Cardscript](https://img.shields.io/badge/tymly-cardscript-blue.svg)](https://tymly.io/)

[![CircleCI](https://circleci.com/gh/wmfs/cardscript-to-quasar.svg?style=svg)](https://circleci.com/gh/wmfs/cardscript-to-quasar)

[![npm (scoped)](https://img.shields.io/npm/v/@wmfs/cardscript-to-quasar.svg)](https://www.npmjs.com/package/@wmfs/cardscript-to-quasar)

[![codecov](https://codecov.io/gh/wmfs/cardscript-to-quasar/branch/master/graph/badge.svg)](https://codecov.io/gh/wmfs/cardscript-to-quasar)

[![CodeFactor](https://www.codefactor.io/repository/github/wmfs/cardscript-to-quasar/badge)](https://www.codefactor.io/repository/github/wmfs/cardscript-to-quasar)

[![Dependabot badge](https://img.shields.io/badge/Dependabot-active-brightgreen.svg)](https://dependabot.com/)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/wmfs/tymly/blob/master/packages/concrete-paths/LICENSE)

> Produces HTML with Quasar-markup from Cardscript JSON

## Install

```bash

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

```

## Usage

```javascript

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](https://quasar-framework.org/components/field.html), 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](https://wmfs.github.io/tymly-website/reference/cardscript/elements/jumbotron.html#backgroundimage) 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

```bash

$ npm test

```

## License

[MIT](https://github.com/wmfs/cardscript/blob/master/LICENSE)